React中父组件触发事件调用子函数组件方法的实现方案

你遇到的问题很典型——函数组件不像类组件有实例，没法直接通过this.IntegrationDownshift这种方式调用子组件的方法。不过我们可以用React的forwardRef和useImperativeHandle来实现这个需求，下面是具体的修改步骤：

第一步：修改子组件（members.js） #

我们需要把嵌套的子组件改成支持ref转发的形式，明确把ClearRecord方法暴露给父组件：

1. 首先导入需要的React API：

import React, { forwardRef, useImperativeHandle } from 'react';

2. 改造DownshiftMultiple组件，用forwardRef包裹并暴露方法：

const DownshiftMultiple = forwardRef((props, ref) => {
  suggestions = props.Members;
  const { classes } = props;
  const [inputValue, setInputValue] = React.useState('');
  const [selectedItem, setSelectedItem] = React.useState([]);

  // 保留原有handleKeyDown、handleInputChange等方法...

  function ClearRecord(){ // 要暴露给父组件的清空方法
    setSelectedItem([]); // 直接设为空数组，简化原有的slice写法
    setInputValue(''); // 顺便清空输入框内容，提升用户体验
  }

  // 通过useImperativeHandle把方法挂载到ref上
  useImperativeHandle(ref, () => ({
    ClearRecord
  }));

  // 保留原有handleChange、handleDelete方法及渲染逻辑...
});

3. 改造外层IntegrationDownshift组件，把ref转发给内部的DownshiftMultiple：

export default forwardRef(function IntegrationDownshift(props, ref) {
  const classes = useStyles();
  const Members = props.Members;
  
  // 注意：原有的props.onDataChanged("test")会在每次渲染触发，建议移到useEffect中控制执行时机
  return (
    <div className={classes.root}>
      <DownshiftMultiple 
        ref={ref} 
        classes={classes} 
        Members={Members} 
        onDataChanged={props.onDataChanged} 
      />
    </div>
  );
});

第二步：修改父组件（App.js） #

现在可以在父组件中创建ref，通过它调用子组件暴露的方法：

1. 在构造函数中创建ref：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      Name: "Name from state...",
      Description: "Description from state...",
      Data: [data]
    };
    // 创建用于关联子组件的ref
    this.integrationRef = React.createRef();
  }

2. 修改Clear方法，通过ref调用子组件的清空方法：

Clear(){
  this.integrationRef.current.ClearRecord();
}

3. 将ref挂载到子组件上，并完善按钮文本：

render() {
  return (
    <div>
      <IntegrationDownshift 
        ref={this.integrationRef} 
        Members={this.state.Data}
        onDataChanged={(members) => {
          // 这里可以接收子组件传递的选中成员数据
          console.log("选中的成员：", members);
        }}
      />
      <Button variant="contained" color="secondary" onClick={this.Clear.bind(this)} >
        清空选中项
      </Button>
    </div>
  );
}

额外优化建议 #

• 避免使用全局变量members=newSelectedItem;，直接通过props.onDataChanged(newSelectedItem)传递数据，保持React单向数据流的清晰性。
• 原ClearRecord方法中的selectedItem.slice(0, selectedItem.length - selectedItem.length)可以简化为[]，实现完全一致的清空效果。

这样修改后，点击父组件的按钮就能触发子组件的多选项清空操作了。

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