javascript - 为什么在 Ant Design 表单中自定义输入控件无法正确验证？

Question

我正在使用 Ant Design，但在使用表单时遇到以下问题。

我有一个自定义组件，它包装了一个 antd AutoComplete，其中包含远程获取自动完成建议所需的代码:

const ProductComplete = () => {
    const [value, setValue] = React.useState('')
    const [options, setOptions] = React.useState([])
    const onSearch = searchText => {
        fetchProductsFromServer(searchText)
            .then(options => options.map(o => ({value: o})))
            .then(options => setOptions(options))
    }
    const onChange = data => {
        setValue(data)
    }
    return (
        <AutoComplete
            value={value}
            options={options}
            onSearch={onSearch}
            onChange={onChange}
        />
    )
}

但是当我以 antd 形式使用它时:

return (
    <Form
        {...formLayout}
        ref={this.formRef}
    >
        <Form.Item
            name={'product'}
            label={'Product'}
            rules={[{
                required: true
            }]}
        >
            <ProductComplete/>
        </Form.Item>
    </Form>

当我在外部触发验证时:let fieldsValue = await this.formRef.current.validateFields() 表单表现得好像该字段中没有任何内容，并向用户发出该字段是必需的信号根据指定的验证规则(即使自动完成中有文本)

但是，如果我将 AutoComplete 直接连接到包含表单的组件中，而不是将其打包为自己的组件(如上所述)，它可以正常工作!

return (
    <Form
        {...formLayout}
        ref={this.formRef}
    >
        <Form.Item
            name={'product'}
            label={'Product'}
            rules={[{
                required: true
            }]}
        >
            <AutoComplete
                value={this.state.product}
                options={this.state.products}
                onSearch={(searchText) => this.onSearchProducts(searchText)}
                onChange={(value) => this.onChange(value)}
            />
        </Form.Item>
    </Form>

任何想法为什么会这样？

干杯!

Answer 1

没关系，我想通了!

我不知何故没有注意到 https://ant.design/components/form/#components-form-demo-customized-form-controls Ant Design 网站上的部分。

我只需要将受控的 value 属性和 onChange 事件传递给自定义组件:

const ProductComplete = ({value = '', onChange}) => {
    const [products, setProducts] = React.useState([])
    const onSearch = searchText => {
        fakeFetch(searchText)
            .then(options => options.map(o => ({value: o})))
            .then(options => setProducts(options))
    }
    const handleChange = (value) => {
        if (onChange) {
            onChange(value)
        }
    }
    return (
        <AutoComplete
            value={value}
            options={products}
            onSearch={onSearch}
            onChange={handleChange}
        />
    )
}

现在工作正常。真的很明显。

干杯