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

Question

我包装了一个 <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 中包装表单标签，以便暴露其原生 props/functions？我希望 refs 在这里工作，但我认为有更好的方法。

编辑

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

Answer 1

改为 os 使用：

 <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>

Answer 2

如果你想使用自定义组件作为 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

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

Wrapping textarea as a React component and exposing value

javascript

reactjs

antd