antDesign form.getFieldDecorator 取值问题

Question

答案: (官方文档,之前错误原因,getFieldDecorator与 ref冲突 ):

  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  };


      <Form layout="inline" onSubmit={this.handleSubmit}>
        <Form.Item validateStatus={usernameError ? 'error' : ''} help={usernameError || ''}>
          {getFieldDecorator('username', {
            rules: [{ required: true, message: 'Please input your username!' }],
          })(
            <Input
              prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder="Username"
            />,
          )}
        </Form.Item>

如题,form.getFieldDecorator在父组件里不好用啊.
报的错误在下面

如下写法,子组件是好用的

之前 是 getFieldDecorator 与 ref 属性冲突 .

export default Form.create<TableFormProps>()(TableForm);

"antd": "^3.23.6",

  "name": "ant-design-pro",
  "version": "4.0.0",

class AeModel extends React.Component {
... ...


  ModelNameChange = (e) => {
    this.form.validateFields((error: any, values: any) => {
      console.log(values)
    })

  };



  render() {
    const { getFieldDecorator } = this.props.form;
    return (
    
                <Form.Item label="模型名称">
                {getFieldDecorator("modelName", {
                initialValue: this.state.modelName,
                rules: [
                    {
                      required: true,
                      message: "模型名称不能为空"
                    }
                  ]
                })(
              <Input
                placeholder="请输入模型名称"
                // ref="ModelName"
                onChange={() => this.ModelNameChange()}
              />
              )}

                </Form.Item>
    ... ...
    )

export default Form.create<CreateFormProps>()(AeModel);

Answer 1

ant design 4.0了，如果你使用的是最新的版本，那form.getFieldDecorato 将不会被支持