问答

antDesign form.getFieldDecorator 取值问题

作者:admin 2021-09-23 我要评论

答案: (官方文档,之前错误原因,getFieldDecorator与 ref冲突 ): handleSubmit = e = { e.preventDefault(); this.props.form.validateFields((err, values) = { ...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

答案: (官方文档,之前错误原因,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);

Screenshot from 2020-03-11 09-51-31.png

###

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

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • antDesign form.getFieldDecorator 取

    antDesign form.getFieldDecorator 取

  • nginx 反向代理 node 项目,session 丢

    nginx 反向代理 node 项目,session 丢

  • Angular使用ng-zorro-antd表格过滤自动

    Angular使用ng-zorro-antd表格过滤自动

  • 求问,treeTable 无法显示树状是什么问

    求问,treeTable 无法显示树状是什么问

腾讯云代理商
海外云服务器