自定义组件 <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
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…