将 textarea 包装为 React 组件并公开值答案

【问题标题】：Wrapping textarea as a React component and exposing value将 textarea 包装为 React 组件并公开值
【发布时间】：2022-01-14 09:28:26
【问题描述】：

我已经将 <textarea /> 标记包装为一个反应组件，它位于 Ant Design Form.Item 内部，如下所示：

<Form.Item
  name="query"
  label="Query"
>
  <CodeEditor />
</Form.Item>

问题是当我提交表单时，“查询”的值未定义。

如果我将<CodeEditor /> 替换为文本区号，如下所示：

<Form.Item
  name="query"
  label="Query"
>
  <textarea />
</Form.Item>

“查询”值设置正确。

应该如何在 React 中包装表单标签，以便暴露它们的原生道具/功能？我希望裁判可以在这里工作，但我认为有更好的方法。

编辑

CodeSandbox example。如果您在 CodeEditor 输入中输入一些文本并单击“控制台日志查询”按钮，将记录“未定义”。但如果您将第 22 行替换为 <textarea />，则查询值将被记录。

【问题讨论】：

能否请您展示 CodeEditor 组件的道具？
请提供mvce，至少是CodeEditor组件的代码
提供了一个 CodeSandbox 示例。 @slideshowp2
@Oro 有什么想法吗？

标签： javascript reactjs antd

【解决方案1】：

如果您想将自定义组件用作 Form.Item 的子组件，您应该为其提供 value 和 onChange 属性，因为 Form.Item 将使用它们来更改表单实例。

在您的情况下，CodeEditor 组件的代码如下所示：

function CodeEditor({ value, options, readOnly, onChange }) {
  const textRef = React.useRef();

  return (
    <Editor
      value={value}
      ref={textRef}
      language="sql"
      placeholder="Please enter SQL code."
      onChange={onChange}
      padding={15}
      style={{
        backgroundColor: "#f5f5f5",
        fontFamily:
          "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace",
        fontSize: 16
      }}
    />
  );
}

Link to codesandbox

【讨论】：

成功了。谢谢！

【解决方案2】：

代替操作系统使用：

 <Form.Item
   name="query"
   label="Query"
 >
    <textarea />
 </Form.Item>

你可以试试这个从antd导入的组件，如下图：

import { Input } from 'antd';

const { TextArea } = Input;

<Form.Item
  name="query"
  label="Query"
>
  <TextArea />
</Form.Item>

【讨论】：