Question

如果我使用如下形式的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无法从类中获取值？请帮忙！

Answer 1

使用Form初始化自定义组件后，antd无法像默认this.props.onChange那样控制组件。

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

您需要使用注入了getFieldDecorator的{{1}}，请read the docs carefully。

由getFieldDecorator 包装后， value （或由valuePropName定义的其他属性） onChange （或由触发器定义的其他属性））道具将添加到表单控件中，表单数据流将由Form处理。

Answer 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}
      />
    );
  }
}

将自定义类与getFieldDecorator一起使用（React，Ant Design）

2 个答案: