React中如何从导出的函数组件内调用父类组件的handleChange方法

你只需要在Cropper函数组件中接收父组件BasicInfos传递的props，取出对应的方法绑定到Crop的onChange事件即可，父组件现有代码无需修改，修改后的子组件代码如下：

// Cropper.jsx
export default function Cropper(props) {
  // 取出父组件传入的handleChange方法，父组件中传递的字段名为action
  const { action } = props;
  return (
    <Crop onChange={action}/>
  );
}

如果需要在Cropper组件内先做自定义逻辑再调用父组件方法，可以封装一层事件处理函数：

// Cropper.jsx
export default function Cropper(props) {
  const { action } = props;

  const onCropChange = (blob, url) => {
    // 此处可添加子组件内的前置处理逻辑
    // 例如参数校验、子组件内状态更新等
    action(blob, url);
  }

  return (
    <Crop onChange={onCropChange}/>
  );
}

注意事项 #

• 父子组件传递的props字段名要保持一致，你当前父组件传递的字段名为action，如果想改成更语义化的handleChange，可以把父组件的调用语句修改为<Cropper handleChange={this.handleChange}/>，子组件对应取出props.handleChange即可
• 你在BasicInfos类组件中用箭头函数定义了handleChange，已经自动绑定了this指向，直接传递给子组件不会出现this丢失的问题
• 要确保Crop组件触发onChange事件时传递的参数顺序和handleChange接收的(blob, url)顺序一致，否则需要自行调整参数顺序后再调用父组件方法

内容的提问来源于stack exchange，提问作者cricciardi