时间戳

首页 > 解决方案 > 默认值或值不适用于 FormItem ANTD

reactjs - 默认值或值不适用于 FormItem ANTD

问题描述

我尝试使用以下代码，并且该字段永远不会绑定。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 时，不会反映更改。

标签： reactjstypescriptantd

解决方案

文档指出：

您不能通过 value defaultValue 属性设置表单控件的值，而应该在 getFieldDecorator 中使用 initialValue设置默认值。

您不应该手动调用 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)

推荐阅读