antd - ant design getFieldDecorator 无法获取自定义组件的值

问题描述

问 题

自定义组件 <CheckList/>

class CheckList extends React.Component {
  state = {
    checkedList: [],
    indeterminate: false,
    checkAll: false
  };
  onChange = (checkedList) => {
    // console.log(this.props.dataitem.action.length);
    console.log(checkedList);
    this.setState({
      checkedList,
      indeterminate: !!checkedList.length && (checkedList.length < this.props.dataitem.action.length),
      checkAll: checkedList.length === this.props.dataitem.action.length
    });
  }
  onCheckAllChange = (e) => {
    this.setState({
      checkedList: e.target.checked
        ? this.props.dataitem.action.map((item, key) => {
          return item.value;
        })
        : [],
      indeterminate: false,
      checkAll: e.target.checked
    });
  }
  render() {
    const dataitem = this.props.dataitem;
    return (
      <div style={{
        borderBottom: '1px solid #ccc',
        marginBottom: '1em'
      }}>
        <div>
          <Checkbox indeterminate={this.state.indeterminate} onChange={this.onCheckAllChange} checked={this.state.checkAll}>
            {dataitem.title}{dataitem.action.length}
          </Checkbox>
        </div>
        <br/>
        <CheckboxGroup options={dataitem.action} value={this.state.checkedList} onChange={this.onChange}/>
      </div>
    );
  }
}

使用getFieldDecorator的引用

{getFieldDecorator('node_id')(<CheckList dataitem={item}/>)}

提交

handleSubmit = (e) => {
    e.preventDefault();
    // console.log('submit');
    this.props.form.validateFields((err, fieldsValue) => {
        console.log(fieldsValue);
    });
  }

console:
node_id:undefined

解决方案

https://ant.design/components...

在自定义组件里调用this.props.onChange

这篇关于antd - ant design getFieldDecorator 无法获取自定义组件的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！