React

ant-design自定义表单组件回传值的问题

2018-01-11  本文已影响1328人  张延伟

ant-design给我们提供了Form表单组件,但是由于排版,由于功能等原因,我们会需要自定义表单组件;但是原有的表单取值和验证使用保持不变。
ant-design表单组件我主要使用getFieldDecorator方法。
下面是父组件的表单,引用了一个自定义的表单组件OptionSelect,子组件里面可能数据格式或者数据个数不一样。

<FormItem label="选项">
       getFieldDecorator('option', {
              initialValue: [defaultValue.option || '0', defaultValue.word]
         })(
                <OptionSelect/>
         )}
</FormItem>

父组件使用getFieldDecorator最后可以取到option选项的值,但是这是一个值,他怎么和子组件的关联?
子组件props:

render() {
  const {value} = this.props;
  return(
      <div>
          <Select value={value[0]} onChange={this.selectChange}>
            //...
        </Select>
        <Input  value={value[1]} onChange={this.inputChange}/>
    </div>
  )
}
selectChange(val) {
    const {onChange} = this.props;
    //通知父组件更新
    //封装数据传参
    let changeVal;
    //...
    onChange(changeVal)
}
inputChange(e) {
  const {onChange} = this.props;
}
OptionSelect.propTypes = {
    value: PropTypes.array,
    onChange: PropTypes.func
};

getFieldDecorator这个方法会向组件注入value参数,onChange方法。子组件通过value参数来初始化值,通过onChange方法通知父组件更新。

上一篇 下一篇

猜你喜欢

热点阅读