javascript - render() 中的 React onClick 函数未定义

Question

使用下面的 react 组件我收到错误:

Uncaught (in promise) TypeError: Cannot read property 'oncontactClick' of undefined

 class Contacts extends React.Component{
    constructor(props, contact){
      super(props);
      this.state ={ contacts: [] };
      this.oncontactClick = this.oncontactClick.bind(this);
    }
    oncontactClick(){
      console.log("contact clicked");
    }
    render(){
      var contacts = this.state.contacts;
      contacts = contacts.map(function(contact, index){
        return(
          <div key={index} className="contactcard" onClick={this.oncontactClick}>
            <div className="name">{contact.name}</div>
          </div>
        )
      });
      return(
        <div id="addcontainer">
          <form id="addinput">
            <input type="text" ref="name" placeholder="name" required/>
          </form>
          <ul>{contacts}</ul>
        </div>
      );
    }
  };

但是，如果我将 onClick 放在 form“addinput” 中，它就可以正常工作。为什么会出现这种情况以及如何让它在 contactcard 中工作？我想避免使用 jQuery。

Answer 1

Array.map 有两个参数:

第一个是迭代者。

第二个是在 iteratee 中定义 this 的内容。

这应该有效:

  contacts = contacts.map(function(contact, index){
    return(
      <div key={index} className="contactcard" onClick={this.oncontactClick}>
        <div className="name">{contact.name}</div>
      </div>
    )
  }, this);