ant 自定义表单组件

2019-08-07  本文已影响0人  LenHong

表单如果使用修饰器 getFieldDecorator 需要在自定义组件调用 this.props.onChange
表单如果使用 resetFields 需要在自定义组件中设置 value={this.props.value}

...
render() {
    const { deptListOptions, onChange, value } = this.props;
    return (
      <TreeSelect
        placeholder="请选择"
        style={{ width: '100%' }}
        loadData={this.loadTreeNode}
        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}

        //实现外部的 resetFields 方法
        value={value} 

        //实现外部的 getFieldDecorator 方法
        onChange={onChange}
      >
        {this.renderTreeNodeOptions(deptListOptions)}
      </TreeSelect>
    );
  }
...

自定义表单组件只要满足以下条件,即可与 Form 组件一起使用

参考:https://ant.design/components/form-cn/#components-form-demo-customized-form-controls

上一篇 下一篇

猜你喜欢

热点阅读