React事件冒泡失效？子组件向父组件传值实现遇问题求助

嘿，我帮你排查了下代码里的问题，核心是回调函数的参数传递不正确，导致子组件的数据没法正常传递给父组件，咱们一步步来修正：

问题根源 #

你父组件在传递addToLib回调时，没有接收子组件传过来的data参数，相当于父组件的回调函数没拿到子组件传递的数据，自然没法更新状态；另外也可以优化一下this的绑定方式，避免潜在的上下文问题。

修正后的完整代码 #

子组件代码 #

class SearchResultRow extends React.Component {
  // 用箭头函数定义方法，自动绑定this，不用手动处理bind
  bubbleUp = (data) => {
    alert(data);
    // 调用父组件传入的回调，把数据传上去
    this.props.addToLib(data);
  }

  render() { 
    const formattedDate = this.props.releaseDate; 
    return (
      <div 
        className="component-search-result-row" 
        onClick={() => this.bubbleUp(this.props)}
      >
        {/* 这里放你的子组件内容，比如展示日期：{formattedDate} */}
      </div>
    );
  }
}

父组件代码 #

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedData: null
    };
  }

  // 同样用箭头函数绑定this
  addToLib = (data) => {
    alert(data);
    this.setState({ selectedData: data });
  }

  render() {
    return (
      <SearchResultRow 
        releaseDate="2024-05-20" // 替换成你的实际日期数据
        // 这里要把子组件传过来的data参数传递给addToLib方法
        addToLib={(data) => this.addToLib(data)} 
      />
    );
  }
}

额外优化小技巧 #

如果父组件的addToLib回调不需要额外逻辑，还可以简化写法（前提是addToLib已经用箭头函数定义或者在constructor里绑定了this）：

// 父组件render里直接传递方法引用即可
<SearchResultRow 
  releaseDate="2024-05-20"
  addToLib={this.addToLib} 
/>

子组件的onClick也可以用bind简化：

<div 
  className="component-search-result-row" 
  onClick={this.bubbleUp.bind(this, this.props)}
>

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