提交时读取导入表单组件的值（不存储在状态中）

Question

我为 ReactJS 开发了一个组件，与 Antd 的表单一起用作表单项。但是，onFinish回调函数返回的自定义组件的值未定义。可能 Antd 的表单无法从我的组件中检索值。当我仅使用 Antd 组件作为表单项时，不会发生这种情况。

下面的例子MultipleEntry是我开发的组件。MultipleEntry有一个嵌套的 TextArea 组件。

function Sandbox(props) {

    return (
        <>
            <Form onFinish={(values) => console.log(values)}>
                <Form.Item name={'myComponent'}  >
                    <MultipleEntry />
                </Form.Item>
                <Form.Item>
                    <Button type="primary" htmlType="submit">Submit</Button>
                </Form.Item>
            </Form>

        </>
    );
}


function MultipleEntry(props) {

    const [value, setValue] = useState([]);
    
    const Split = string =>
    {
        setValue(String(string).split(';'))
    }

    return (
        <TextArea
            onChange={(e) => {Split(e.target.value)}}
        />
    );
}

我在这里考虑了两种选择：

1. 将 的值存储MultipleEntry在其内部状态中。
2. MultipleEntry存储父组件上的值。

但是，我不想将值存储在客户端状态的任何位置，因为组件内的数据MultipleEntry太大并且对性能产生影响。

如何使用 Antd 表单的 API 使其读取 的值MultipleEntry作为表单字段，并填充 的输入参数onFinish？

Answer 1

Antd 的 FormItem 的行为就像一个高阶组件，并将一些 props 传递给子组件。

因此，如果您使用任何 HTML 表单字段元素（例如 input），那么 FormItem 会将 onChange 和 value 作为 props 传递给 input。因此 FormItem 将控制该元素的值和 onChange 事件。

但如上所述，如果 FormItem 中存在某些验证错误，您将无法使用样式。

类似地，Antd 的组件也使用原生 HTML 表单字段元素并使用 value 和 onChange。但最重要的是，如果存在任何验证错误，您将获得样式。

这是您的具体情况，您可以使用 onChange 和 props 中的 value 并使用与以下相同的内容

function MultipleEntry(props) {
  const Split = e => {
    e.target.value = String(e.target.value).split(",");
    props.onChange(e);
  };

  return <input value={props.value} onChange={e => Split(e)} />;
}

如果您使用任何本机 HTML 表单元素，则只需拆分 props 并将其传递到元素中，如下所示

function MultipleEntry(props) {
  return <input {...props} />;
}

对于拆分，您可以使用 getValueFromEvent ，然后拆分那里的值。

这是修改后的沙箱的链接，专门解决您的问题https://codesandbox.io/s/agitated-lake-65prw