小编Dio*_*res的帖子

我为 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 …