当您将名称道具传递给Form.Item时,antd将克隆子项并将两个道具传递给子项
value
和
onChange
。如果你可以通过在CustomDropdown中接受道具来验证并控制台它。你只需要将这些道具传递给<选择零部件以使其受控。您的输入与下拉列表无关。
这是完整的代码。
import { PlusOutlined } from '@ant-design/icons';
import { Button, Checkbox, Divider, Form, Input, Select, Space } from 'antd';
import { useRef, useState } from 'react';
const DropdownCustom = (props) => {
console.log(props); // => value, onChange
const [items, setItems] = useState(['jack', 'lucy']);
const [name, setName] = useState('');
const inputRef = useRef(null);
const onNameChange = (event) => {
setName(event.target.value);
};
const addItem = (e) => {
e.preventDefault();
setItems([...items, name || `New item ${index++}`]);
setName('');
setTimeout(() => {
inputRef.current?.focus();
}, 0);
};
return (
<Select
{...props}
style={{ width: 300 }}
placeholder='custom dropdown render'
dropdownRender={(menu) => (
<>
{menu}
<Divider style={{ margin: '8px 0' }} />
<Space style={{ padding: '0 8px 4px' }}>
<Input
placeholder='Please enter item'
ref={inputRef}
value={name}
onChange={onNameChange}
onKeyDown={(e) => e.stopPropagation()}
/>
<Button type='text' icon={<PlusOutlined />} onClick={addItem}>
Add item
</Button>
</Space>
</>
)}
options={items.map((item) => ({ label: item, value: item }))}
/>
);
};
const onFinish = (values) => {
console.log('Success:', values);
};
const onFinishFailed = (errorInfo) => {
console.log('Failed:', errorInfo);
};
const App = () => (
<Form
name='basic'
labelCol={{ span: 8 }}
wrapperCol={{ span: 16 }}
style={{ maxWidth: 600 }}
initialValues={{ remember: true }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete='off'
>
<Form.Item label='Username' name='username' rules={[{ required: true, message: 'Please input your username!' }]}>
<Input />
</Form.Item>
<Form.Item label='Password' name='password' rules={[{ required: true, message: 'Please input your password!' }]}>
<Input.Password />
</Form.Item>
<Form.Item label='Choose option' name='option' rules={[{ required: true, message: 'Please, choose an option' }]}>
<DropdownCustom />
</Form.Item>
<Form.Item name='remember' valuePropName='checked' wrapperCol={{ offset: 8, span: 16 }}>
<Checkbox>Remember me</Checkbox>
</Form.Item>
<Form.Item wrapperCol={{ offset: 8, span: 16 }}>
<Button type='primary' htmlType='submit'>
Submit
</Button>
</Form.Item>
</Form>
);
您也可以按照antd-api获取更多示例。
Why Form.Item not update value when children is nest?