默认值或值不适用于 FormItem ANTD

Posted 2023-02-22

【中文标题】默认值或值不适用于 FormItem ANTD

【英文标题】：defaultValue or value not working on FormItem ANTD

【发布时间】：2019-04-10 11:18:42

【问题描述】：

我尝试使用以下代码，但该字段永远不会被绑定。 onChange 属性运行良好

const  getFieldDecorator, getFieldError, isFieldTouched  = this.props.form;
const NameError = isFieldTouched("Name") && getFieldError("Name");

<FormItem validateStatus=NameError ? "error" : "" help=NameError || "">
  getFieldDecorator("Name", 
    //initialValue: this.state.Data.Name,
    rules: [ required: true, message: "Please input the component name!" ]
  )(
    <Input
      className="form-control"
      type="text"
      name="Name"
      defaultValue=this.state.Data.Name
      onChange=this.onChange
    />
  )
</FormItem>

我错过了什么吗？我什至用input代替Input

编辑 在 componentDidMount 方法上，我从 API 获取数据：

fetch('http://localhost:5728/Fields/get/' + this.state.Data.Id)
          .then(results=>
            return results.json()
          )
          .then(data=>

            this.setState(
                Data: 
                    Id: data.field.Id,
                    Name: data.field.Name,
                    Description: data.field.Description,
                    Value: data.field.Value
                
              )

          )

我尝试使用initialValue，但它仅在constructor 方法上设置状态值时才有效。调用 API 时，更改不会反映。

【问题讨论】：

initialValue getFieldDecorator 的第二个参数中的成员应该可以工作。您无需将defaultValue 传递给Input。

非常感谢您的回复。你知道，我试过了，但我遇到了问题，请查看编辑。

啊，好的。那是有道理的。我知道如何正确修复它，但作为一种解决方法，我会 1）将表单提取到单独的组件中，2）仅在加载完成后安装提取的组件（并将数据作为道具传递）。不过，可能会有更好的解决方案。

哦，非常酷的方法。我真的很喜欢它，但是有一个问题，这是一种好习惯吗？很抱歉这个愚蠢的问题，我对 ReactJS 很陌生。

【参考方案1】：

docs states 那个：

您不能通过 value defaultValue 属性设置表单 control 的值，而应使用 initialValue in getFieldDecorator 设置默认值。 p>

您不应手动调用 setState，请使用 this.props.form.setFieldsValue 以编程方式更改值。

所以你只需要在后端加载数据时调用setFieldsValue即可：

fetch('http://localhost:5728/Fields/get/' + this.state.Data.Id)
      .then(results=>
        return results.json()
      )
      .then(data=>

        this.props.form.setFieldsValue(
                Id: data.field.Id,
                Name: data.field.Name,
                Description: data.field.Description,
                Value: data.field.Value
          )
      )

或者更短，如果来自后端的data.field 完全匹配字段名称：

this.props.form.setFieldsValue(data.field)

【讨论】：

非常感谢，这行得通。一个问题，关于这个“你不应该手动调用 setState”。在我看来，我仍然需要同时使用两者，对吧？ setState（在 webapi 调用和 onChange 之后）和 this.props.form.setFieldsValue(data.field)。否则，react 如何知道当前状态是什么？我应该以某种方式将“setFieldsValue”与我的州名联系起来吗？

好问题。您可以使用props.form.getFieldValue/props.form.getFieldsValue 提取数据。但是，如果您的组件状态使用了额外的数据（不在表单中），我认为您可以同时使用两者，在我看来它不应该影响 antd 表单逻辑。

我收到错误：TypeError: Cannot read property 'setFieldsValue' of undefined

@HassanAliShahzad 如果你使用 antd 版本 > 4.x 那么你必须使用钩子：const [form] = Form.useForm()，然后你可以使用form.setFieldsValue(...)

非常感谢！我对 defaultValue 有同样的问题。 antd Datepicker 的 defaultValue 在 Form.Item 中不能正常工作，所以我使用setFieldsValue(obj) 而不是 defaultValue 来设置默认 DatePicker 然后神奇地工作！很好的答案！

【参考方案2】：

对于类组件 V4：

class Demo extends React.Component 
  formRef = React.createRef();

  componentDidMount() 
    this.formRef.current.setFieldsValue(
      username: 'Bamboo',
    );
  

  render() 
    return (
      <Form ref=this.formRef>
        <Form.Item name="username" rules=[ required: true ]>
          <Input />
        </Form.Item>
      </Form>
    );
  

【讨论】：

我认为最有保障的方法是使用 ref.你同意我的观点吗？

【参考方案3】：

你也可以使用钩子

import  Form  from "antd"

const [form] = Form.useForm();

 fetch('api')
      .then(results=>
        return results.json()
      )
      .then(data=>
        form.setFieldsValue(
           sample: data.dataYouWant
        );


<Form form = form>
   <Form.Item name = "sample">
       <Input />
   </Form.Item>
</Form>

【讨论】：

添加更多有关代码的详细信息将有助于其他人更好地理解您的答案。