defaultValue或值不适用于FormItem ANTD

时间:2018-11-07 01:26:00

标签: reactjs typescript 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时,更改不会反映出来。

3 个答案:

答案 0 :(得分:1)

docs states

  

您无法通过值 defaultValue 属性设置形式为 control 的值,而应在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)

答案 1 :(得分:1)

你也可以使用钩子

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>

答案 2 :(得分:0)

对于类组件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>
    );
  }
}