AntDesign getFieldDecorator 获取自定义组件的值

Posted 2021-12-20 tian874540961

AntDesign getFieldDecorator 获取自定义组件的值

1.自定义或第三方的表单控件，也可以与 Form 组件一起使用。只要该组件遵循以下的约定：

（1）提供受控属性 value 或其它与 valuePropName 的值同名的属性。

（2）提供 onChange 事件或 trigger 的值同名的事件。

（3）不能是函数式组件。

2.创建组件

这里通过自定义的搜索输入框来展示

let timeout;
let currentValue;
function fetch(value, callback) 
  if (timeout) 
    clearTimeout(timeout);
    timeout = null;
  
  currentValue = value;
  function getData() 
    const params = 
      size: 10,
      name: value
    ;
    apiSubwayList(params).then(
      d => 
        if (currentValue === value) 
          const result = d.list;
          const data = [];
          result.forEach(r => 
            data.push(
              value: r.subwayId,
              text: r.name,
            );
          );
          callback(data);
        
      
    );
  
  timeout = setTimeout(getData, 300);

class SearchInput extends PureComponent 
  state = 
    data: [],
    value: undefined
  ;
  handleSearch = value => 
    fetch(value, data => this.setState(data));
  ;
  handleChange = value => 
    this.setState(value);
    this.props.onChange(value)
  ;
  render() 
    const options = this.state.data.map(d => <Option key=d.value>d.text</Option>);
    return (
      <div>
      <Select
        showSearch
        value=this.state.value
        placeholder=this.props.placeholder
        // style=this.props.style
        defaultActiveFirstOption=false
        showArrow=false
        filterOption=false
        onSearch=this.handleSearch
        onChange=this.handleChange
        notFoundContent=null
      >
        options
      </Select>
      <span>输入并选择对应选项，否则无效</span>
      </div>
    )
  

SearchInput.propTypes = 
  data: PropTypes.array,
  value: PropTypes.string,
  onChange: PropTypes.func
;
export default SearchInput;

可以看到，使用getFieldDecorator时，会通过props的形式向自定义的组件传入onChange回调方法，使用这个回调函数会通知getFieldDecorator所绑定字段的值的变化。

3.使用组件

<FormItem
    ...formItemLayout
    label=<span>所在地铁站</span>
>
    getFieldDecorator('owner', 
     rules: [
              required: true,
              message: '请选择所在地铁站',
              ,
            ],
    )(
    <SearchInput placeholder="输入并选择所属地铁"/>)
</FormItem>

使用getFieldDecorator会隐式的传入onChange回调方法，当然，如果想传入其他参数，也可以像placeholder那样显示的传入。