如何使用ant design form initialValue

Question

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>
 )
}

Answer 1

它会将值设置为您分配给 initialValue 的值，因此第一种方法是正确的

你可以在这里查看 https://ant.design/components/form/#API

Answer 2

是的，文档很清楚。我犯了一个错误。我在 getFieldDecorator.

中使用了 initialValues（复数），而不是 initialValue

此外，请确保您使用的版本是 Ant 3.X 在 getFieldDecorator 中初始化它们的值，或者如果您使用的是 4.X 版本，请使用 initialValues 作为Form 的一个属性。

Answer 3

您应该使用 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>

Answer 4

对我来说，设置 initialValues 如果它是一个在加载表单时已经存在的对象，那么它是“静态的”。但是，当异步获取该对象时（使用 useEffect 挂钩），initialValues 甚至表单项上的设置 initialValue 似乎都不起作用。有什么想法吗？

Answer 5

在 useEffect 中使用“setFieldsValue”非常有效！

useEffect(() => {
    props.form.setFieldsValue({
        someFormField: formCalculatedValue,
    });        
}, [someDependencies]);

如何使用ant design form initialValue

how to use ant design form initialValue

javascript

reactjs

antd

react-apollo