![](/img/trans.png)
[英]How can I use initialValue for DatePicker in Form.Item of Ant Design
[英]how to use ant design form initialValue
使用 antd Form initialValue 哪个对?
我想知道,如果 antd form initialValue 用于设置初始数据或仅在表单没有值时显示值。
const Component = ({ id }) => {
const initialName = 'John'
const { data } = useQuery(GET_NAME, { variables: { id } })
if (data) {
initialName = data.name
}
return (
<Form.Item>
{form.getFieldDecorator('name', { initialValue: initialName })(<Input />)}
</Form.Item>
)
}
const Component = ({ id }) => {
const { data } = useQuery(GET_NAME, {
variables: { id },
onCompleted: res => { form.setFieldsValue({ name: res.data.name }) }
})
return (
<Form.Item>
{form.getFieldDecorator('name', { initialValue: 'John' })(<Input />)}
</Form.Item>
)
}
您应该使用 Form 组件包装您的表单项,并将初始值添加到 Form 而不是 Form.Item。
例如:
<Form
initialValues={{ username:'default value' }}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
>
<Form.Item
label="Username"
name="username"
rules={[{ required: true, message: 'Please input your username!' }]}
>
<Input />
</Form.Item>
</Form>
是的,文档很清楚我犯了一个错误,而不是 initialValue 我在 getFieldDecorator 中使用了 initialValues。 还要确保您使用的版本 Ant 3.x 在 getFieldDecorator areas 4.x 中使用 initialValues 作为 Form 的属性启动它们的值
对我来说,如果它是在表单加载时已经存在的 object ,那么设置initialValues
是有效的,让我们坐下来它是“静态的”。 但是,当异步获取 object(使用useEffect
挂钩)时, initialValues
甚至在表单项上设置initialValue
似乎都不起作用。 有什么想法吗?
它会将值设置为您分配 initialValue 的值,因此第一种方法是正确的
在 useEffect 中使用“setFieldsValue”效果惊人!
useEffect(() => {
props.form.setFieldsValue({
someFormField: formCalculatedValue,
});
}, [someDependencies]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.