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

render（）中的React onClick函数未定义

1 个答案: