Antd getFieldDecorator 自定义组件

在开发过程当中，表单组件是很是经常使用的组件之一。在antd中，我的倾向于使用getFieldDecorator去建立formItem。默认的input/select等组件有时候不太能知足需求，因此就会须要自定义一些组件，传递给getFieldDecorator。

一个简单的例子

假设咱们须要封装一个能够过滤远程数据的组件，即antd的select组件的search功能。这个组件会根据输入去特定接口获取数据，而后显示出来，供用户筛选。组件封装以下

基本实现

// 务必使用class方式，若是使用function形式的话，没法被getFieldDecorator使用
class ExampleSeach extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            value: '',
            options: []
        }
    }
    
    handleSearch = async (value) => {
        if (value) {
            // 加载远程数据
            let res = await fetchData()
            this.setState({
                options: res
            })
        } else {
            this.setState({
                options: []
            })
        }
    }
    
    handleChange = value => {
        this.setState({
            value: value
        })
        // 下面一行代码是关键,在被getFieldDecorator包装后，会绑定一个onChange事件，
        // 接收的第一个参数将做为当前formItem的value
        this.props.onChange(value)
    }
    
    render() {
        const opts = options.map(ele => <Option key={ele.value}>{ele.label}</Option>)
        return (
          <Select
            showSearch
            value={this.state.value}
            defaultActiveFirstOption={false}
            showArrow={false}
            filterOption={false}
            onSearch={this.handleSearch}
            onChange={this.handleChange}
            notFoundContent={null}
          >
            {opts}
          </Select>
        )
    }
}
复制代码

以上就实现了一个自定义的远程过滤组件的封装，能够像用Input等组件同样直接在getFieldDecorator中使用了。

进阶需求

若是想给该组件手动赋值（好比编辑某个数据的时候，表单元素默认已经有值了）

// 1. 组件中添加生命周期
static getDerivedStateFromProps(nextProps, prevState) {
    // 通过getFieldDecorator封装之后，props会有value属性，表明外部传递过来的值
    if (nextProps.value !== prevState.value) {
      return {
        value: nextProps.value
      }
    }
    return null
}

// 2. getFieldDecorator中使用的是，经过initialValue赋值
// 或者在表单建立完成后，使用setFields去给表单赋值，这样都会触发自定义组件的生命周期，从而改变组件的值
复制代码

总结

自定义一个表单元素组件，关键就是在组件中的数据变化的时候，去调用props.onChange事件，将组件的值传递到外面