antd 表单赋值

Question

 <Form.Item
             
                {...formItemLayout}
                className="noneRequireIcon"
            >
                {getFieldDecorator('a', {
                    rules: [{required: true, message: ' '}],
          
                })(
                    <div className="pr">
                        <Input autoComplete="off" />
                        <div onClick={click}>点击</div>
                    </div>

                )}
            </Form.Item>

input 框里面定位一个按钮，点击按钮赋值input框，但是加了一层div 后antd赋值后不显示。
代码可以运行，getFieldDecorator 里面纯写input 就可以赋值上去

Answer 1

getFieldDecorator 是一个高阶函数，它接收一个组件为参数，返回一个新的组件。从antd源码getFieldDecorator的定义中可以看出：

  getFieldDecorator<T extends Object = {}>(
    id: keyof T,
    options?: GetFieldDecoratorOptions,
  ): (node: React.ReactNode) => React.ReactNode;

其接收的节点的对应参数参数是一个ReactNode，而ReactNode是由React.createElement()创建出来的。<Input/>组件是一个不折不扣的ReactNode，而套了一个div就不是React.createElement()创建出来的ReactNode了。所以会有问题。