Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.6k views
in Technique[技术] by (71.8m points)

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...