父组件使用antd的Form.create包裹后，子组件无法重写

Question

问题描述

父组件使用antd的Form.create包裹后，子组件无法重写该怎么解决。

相关代码

父组件

class NoticeModal extends listPage {
  changeEditParams(data) {
    console.log(this)
    const editParams = this.state.editParams;
    let obj = {};
    for (let i in editParams) {
      obj[editParams[i]] = data[i];
    }
    obj.userIds = obj.userIds[0]
    console.log(obj)
  }
}
export default Form.create()(NoticeModal);

子组件

class SelectTeamModal extends NoticeModal {
  componentDidMount(){
    console.log()
    super.componentDidMount();
  }
  changeEditParams(data) {
    console.log(this)
    const editParams = this.state.editParams;
    let obj = {};
    for (let i in editParams) {
      obj[editParams[i]] = data[i];
    }
    obj.userIds = obj.userIds[0]
    console.log(obj)
  }
}
export default SelectTeamModal;

this.props中只有form
想重写这个changeEditParams方法改怎么办呢

Answer 1

假如能想自己处理表单数据不应该Form.create()包裹 Form.create()返回的是一个无状态组件

console.log('>>>>>',new NoticeModal () instanceof React.Component) //true
console.log('>>>>>',new Form.create()(NoticeModal) instanceof React.Component) //fales

假如你想自定义组件内方法通过props传递

class NoticeModal extends listPage {

  changeEditParams(data) {
       this.props.onChange(data)
  }
}
export default Form.create()(NoticeModal);


class SelectTeamModal extends React.Component{
  changeEditParams(data) {
    const editParams = this.state.editParams;
    let obj = {};
    for (let i in editParams) {
      obj[editParams[i]] = data[i];
    }
    obj.userIds = obj.userIds[0]
    console.log(obj)
  }
   render (){
    return (
        <NoticeModal onChange={this.changeEditParams} />
    )
    }
}
export default SelectTeamModal;