Question

我是React的新手，正在尝试将onClick事件句柄添加到使用def message(): answer1 = input('Welcome to the Caesar Cipher! What do you want to encrypt?') key = input('Enter the key number that you want to encrypt with. (1 - 26)') def getMessage(): while leng <= lengthOfInput1-1: lengthList.append(chr(ord(answer1[len]) + key)) len += 1 print(lengthList) key = 0 answer1 = '' maxKeySize = 26 lengthOfInput1 = len(answer1) leng = 0 lengthList = [] message() getMessage()创建的列表项中。

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

map。

只要能帮助您理解正在发生的事情，便会受到赞赏。预先感谢。

TypeError: Cannot read property 'AddThisToReadingList' of undefined

Answer 1

这应该可以解决问题：

在ResultsList中：

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

在ListedBooks中：

<button onClick={()=>props.AddThisToReadingList(index)}>
  Add to my reading list
</button>

ListedBooks对this中的ResultsList一无所知。实际上，this是undefined中的ListedBooks。您需要将该方法作为道具传递给ListedBooks才能在此处访问。

Answer 2

向

之类的按钮添加其他数据

<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>
        })
    )
 }

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

2 个答案: