反应冒泡不起作用

Question

我有一个 child 组件和一个 parent 组件，我正在尝试将一些数据从 child 冒泡到 parent，就像这样

Child:

bubbleUp(data){
  alert(data);
  this.props.addToLib(data);
}
...
render() {
  let formattedDate = this.props.releaseDate;
  return (
    <div className="component-search-result-row" onClick={() => {this.bubbleUp(this.props)}}

Parent:

addToLib(data){
    alert(data);
    this.setState({selectedData : data});
}
...
    render(){
    return(
    <SearchResultRow addToLib={() => this.addToLib()}/>
    )};

现在我从第一个警报 (child) 获取数据，但我从 parent 获取未定义数据。知道我错过了什么吗？

Answer 1

在您 parent 的渲染方法中：

render(){
    return(
    <SearchResultRow addToLib={() => this.addToLib()}/>
)};

您的方法不接收任何数据，而是不带任何参数调用 this.addToLib()。

如果你把它改成这样：它应该可以工作：（注意额外的 data）

render(){
    return(
    <SearchResultRow addToLib={(data) => this.addToLib(data)}/>
)};

反应冒泡不起作用

React bubbling up not working

javascript

reactjs

ecmascript-6

react-dom