使用带有 getFieldDecorator 的自定义类（React，Ant Design）答案

【问题标题】：Using custom class with getFieldDecorator (React, Ant Design)使用带有 getFieldDecorator 的自定义类（React，Ant Design）
【发布时间】：2020-02-22 12:05:21
【问题描述】：

如果我以这样的形式使用 Ant Design TreeSelect 组件，一切都很好：

<Form.Item>
    {getFieldDecorator('geo_objects_value', {
        rules: [{
            required: true,
            message: 'Warning msg'
        }],
    })(
        <TreeSelect
            treeData={treeGeoObjects}
            treeNodeFilterProp={'title'}
            treeCheckable={true}
            allowClear
            showCheckedStrategy={SHOW_PARENT}
            dropdownStyle={{maxHeight: 500, overflow: 'auto'}}
        />
    )}
</Form.Item>

但是如果我尝试将自定义类与 Ant Design Tree 组件一起使用，它会给出警告消息：这意味着尚未收到该值。

我的自定义类：

class Demo extends React.Component {
    constructor(props) {
        super(props);
        this.treeData = props.treeData;
        this.state = {
            expandedKeys: [],
            autoExpandParent: true,
            value: [],
        };
    }

    onExpand = expandedKeys => {
        this.setState({
            expandedKeys,
            autoExpandParent: false,
        });
    };

    onCheck = value => {
        this.setState({value});
        this.props.value = value;
        console.log('onCheck', this.props.value);
    };

    renderTreeNodes = data =>
        data.map(item => {
            if (item.children) {
                return (
                    <TreeNode title={item.title} key={item.key} dataRef={item}>
                        {this.renderTreeNodes(item.children)}
                    </TreeNode>
                );
            }
            return <TreeNode key={item.key} {...item} />;
        });

    render() {
        return (
            <Tree
                checkable
                onExpand={this.onExpand}
                expandedKeys={this.state.expandedKeys}
                autoExpandParent={this.state.autoExpandParent}
                onCheck={this.onCheck}
                checkedKeys={this.state.value}
            >
                {this.renderTreeNodes(this.treeData)}
            </Tree>
        );
    }
}

在表单中使用自定义类：

<Form.Item>
    {getFieldDecorator('geo_objects_value', {
        rules: [{
            required: true,
            message: 'Warning msg'
        }],
    })(
        <Demo treeData={treeGeoObjects}/>
    )}
</Form.Item>

我做错了什么？为什么 getFieldDecorator 不能从我的类中获取值？请帮忙！

【问题讨论】：

标签： reactjs antd

【解决方案1】：

在使用getFieldDecorator 初始化自定义 组件后，Form 无法像使用默认antd 组件那样控制它。

在这种情况下，开发者需要使用注入的回调并手动控制状态。

您需要使用注入getFieldDecorator的this.props.onChange，请read the docs carefully。

被getFieldDecorator包裹后，value（或valuePropName定义的其他属性）onChange（或trigger定义的其他属性）props将添加到表单控件中，表单数据的流动将由Form处理。

【讨论】：

【解决方案2】：

创建一个Component（或PureComponent）。
确保受控值与valuePropName 同名。
创建一个由onChange 触发的函数。此函数不仅会更新受控值，还会触发受控 onChange 处理程序。

class MyInput extends React.PureComponent {
  constructor(props) {
    super(props);
    const value = props.value || {};
    this.state = {
      // Same name as valuePropName in getFieldDecorator ('value' is default):
      // https://ant.design/components/form/?locale=en-US#getFieldDecorator(id,-options)-parameters
      value,
      // ...
    };
  }

  handleChange = (value) => {
    this.setState({ value });
    const { onChange } = this.props;
    if (onChange) {
      // This will provide the form with changes
      onChange({ ...this.state, ...{ value } });
    }
  }

  render() {
    const { value } = this.state;
    return (
      <Input
        value={value}
        onChange={this.handleChange}
      />
    );
  }
}

【讨论】：