[英]How can I use initialValue for DatePicker in Form.Item of Ant Design
[英]How can I set the value of a Form.Item without a form object in Ant.Design?
我有自定义表单项组件,我想添加隐藏输入,但没有 Ant 表单我无法更新值 object (Form.useForm();
const selectBefore = (
<Select
onChange={value => {/*HOW TO SET NEW VALUE FOR <Input name='term-type'/> ?*/}}
>
<Select.Option value="date">Date</Select.Option>
<Select.Option value="number">Number</Select.Option>
</Select>
);
const InputType = termType === 'date' ? DateInput : Input;
return (
<>
<InputType
addonBefore={selectBefore}
{...rest}
/>
<Form.Item
name='term-type'
initialValue={termType}
style={{display: 'none'}}
>
<Input
type="text"
value={termType}
/>
</Form.Item>
</>
);
您可以完全删除 Input 部分,而不是将其隐藏以使用其值。 尝试这个:
<Select onChange={value => setTermType(value)}}>
<Select.Option value="date">Date</Select.Option>
<Select.Option value="number">Number</Select.Option>
</Select>
然后你可以使用termType
作为 state,它会随着Select
值的变化而更新。 我建议您应该向Select
组件添加一个占位符或默认初始值作为
<Select defaultValue="date" onChange={value => setTermType(value)}}>
<Select.Option value="date">Date</Select.Option>
<Select.Option value="number">Number</Select.Option>
</Select>
您可以使用useState
挂钩并将值设置为state
并且根本不使用Form.useForm()
和Form.Item
:
const [ termType, setTermType ] = useState("");
...
<Select onChange={value => setTermType(value)}}>
<Select.Option value="date">Date</Select.Option>
<Select.Option value="number">Number</Select.Option>
</Select>
...
<Input
type="text"
value={termType}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.