如何使用 ant 設計表格 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

您應該使用 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 2

是的，文檔很清楚我犯了一個錯誤，而不是 initialValue 我在 getFieldDecorator 中使用了 initialValues。 還要確保您使用的版本 Ant 3.x 在 getFieldDecorator areas 4.x 中使用 initialValues 作為 Form 的屬性啟動它們的值

Answer 3

對我來說，如果它是在表單加載時已經存在的 object ，那么設置initialValues是有效的，讓我們坐下來它是“靜態的”。 但是，當異步獲取 object（使用useEffect掛鈎）時， initialValues甚至在表單項上設置initialValue似乎都不起作用。 有什么想法嗎？

Answer 4

它會將值設置為您分配 initialValue 的值，因此第一種方法是正確的

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

Answer 5

在 useEffect 中使用“setFieldsValue”效果驚人！

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