Reactjs 如何将事件处理程序附加到React中动态创建的项

我对React不太熟悉，正在尝试向使用

map

创建的列表项添加onClick事件句柄

当前，页面呈现的各个项目都有自己的按钮。但是，当我点击任何一个按钮时，就会出现错误

TypeError:无法读取未定义的属性“AddThisToReadingList”

如果您能帮助我们了解正在发生的事情，我们将不胜感激。提前谢谢

import React, {Component} from 'react';

class ResultsList extends Component{

  constructor(){
    super();
    this.state={
      currentUserEmail: 'brad.ga.co',
      currentBookId: {}
    }
  }

  AddThisToReadingList(index){
    console.log('this');
    //set state
    //axios request to get book info
    //send to node update user
  }

  render(){
    console.log('Rendering');
    return(
      <div>
        <ul>
          <ListedBooks data ={this.props.listFromGoogle}/>
        </ul>
      </div>
    )
  }
};

const ListedBooks= props =>{
  if (props.data === undefined){
    return (<div>Loading....</div>)
  }

  return(
    props.data.map( (book, index)=>{
      return <li key={index}>
        <h4>Title: {book.volumeInfo.title}</h4>
        <div>Author: {book.volumeInfo.authors.map((element, index)=> <p key={index}>{element}</p>)}</div>
        <p>Description: {book.volumeInfo.description}</p>
        <p>Release Date: {book.volumeInfo.publishedDate}</p>
        <img src={book.volumeInfo.imageLinks.smallThumbnail}/>
        <br/>
        <button onClick={()=>this.AddThisToReadingList(index)}>Add to my reading list</button>
      </li>
    })
  )
}




export default ResultsList;

import React，{Component}来自'React'；
类ResultsList扩展组件{
构造函数（）{
超级（）；
这个州={
currentUserEmail:'brad.ga.co'，
currentBookId:{}
}
}
AddThisToReadingList（索引）{
console.log（“this”）；
//设定状态
//axios请求获取图书信息
//发送到节点更新用户
}
render（）{
console.log（'Rendering'）；
返回(


)
}
};
const ListedBooks=props=>{
如果（props.data==未定义）{
返回（加载…）
}
返回(
道具.数据.地图（（书籍，索引）=>{
return

标题：{book.volumeInfo.Title}
作者：{book.volumeInfo.authors.map（（元素，索引）=>{element}
）}
描述：{book.volumeInfo.Description}

发行日期：{book.volumeInfo.publishedDate}



this.addthistoradinglist（index）}>添加到我的阅读列表

})
)
}
导出默认结果列表；

向按钮添加其他数据

<button id="additem" data-index={index}></button>

然后，您可以使用本机javascript添加侦听器

render() {
  const button = document.getElementById('additem');
  button.addEventListener('click', () => {
      this.AddThisToReadingList(button.dataset.index);
  })

  return (
      props.data.map( (book, index)=>{
        return <li key={index}>
                 <h4>Title: {book.volumeInfo.title}</h4>
                 <div>Author: {book.volumeInfo.authors.map((element, index)=> <p key={index}>{element}</p>)}</div>
                 <p>Description: {book.volumeInfo.description}</p>
                 <p>Release Date: {book.volumeInfo.publishedDate}</p>
                 <img src={book.volumeInfo.imageLinks.smallThumbnail}/>
                 <br/>
                 <button data-index={index}>Add to my reading list</button>
               </li>
        })
    )
 }

render（）{
const button=document.getElementById（'additem'）；
按钮。addEventListener（'单击'，（）=>{
this.addthistoradinglist（button.dataset.index）；
})
返回(
道具.数据.地图（（书籍，索引）=>{
return

标题：{book.volumeInfo.Title}
作者：{book.volumeInfo.authors.map（（元素，索引）=>{element}
）}
描述：{book.volumeInfo.Description}

发行日期：{book.volumeInfo.publishedDate}



添加到我的阅读列表中

})
)
}

这应该可以做到：

在

结果列表中

：

<ListedBooks
  data={this.props.listFromGoogle}
  AddThisToReadingList={this.AddThisToReadingList.bind(this)}
/>

---

ListedBooks

对

ResultsList

中的

这个
一无所知
这个
实际上是
ListedBooks
中未定义的
。您需要将该方法作为道具传递给
ListedBooks
，以便在那里访问该方法。
尝试
，然后在
映射中，
道具。添加thistoradinglist（index）}>
此
在
所列书籍中是
未定义的
。您将此添加到另一个类中。你在干什么？我在上一篇评论中遗漏了
.bind（this）
，但在我的回答中添加了它。谢谢你的代码，但更重要的是，解释确实有效！
<button onClick={()=>props.AddThisToReadingList(index)}>
  Add to my reading list
</button>