蚂蚁设计表单initialValue如何使用

Posted 2023-02-21

【中文标题】蚂蚁设计表单initialValue如何使用

【英文标题】：how to use ant design form initialValue

【发布时间】：2020-09-03 18:01:14

【问题描述】：

使用antd表单initialValue哪个对？

我想知道antd表单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>
 )

【问题讨论】：

对于在搜索动态 initialValues 时遇到此问题的任何人：检查 this。

【参考方案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>

【参考方案2】：

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

【讨论】：

请将您的问题发布为问题，而不是答案！无论如何，我认为this 回答了你的问题。每次初始值更改时，您都应该调用setFieldValues。

【参考方案3】：

是的，文档很清楚。我犯了一个错误。我在getFieldDecorator 中使用了initialValues（复数）而不是initialValue。

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

【参考方案4】：

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

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

【参考方案5】：

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

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