javascript - 如何在ReactJS中将<Click>与onClick事件一起使用

我试图通过单击获取学生的ID。但这给了我类似TypeError的错误：无法读取未定义的属性'handleClick'。这是怎么了？？首先，我需要使此handleClick函数正常工作。

这是我的反应代码：

class Premontessori extends React.Component{
      constructor(props){
        super(props);
        this.state={
          post:[],
          id:[]

        };
        this.handleClick = this.handleClick.bind(this);

      }

      handleClick(event) {
          alert(event);
        }


    componentDidMount(){
       let self = this;
      axios.get('http://localhost:8080/list')
      .then(function(data) {
          //console.log(data);
          self.setState({post:data.data});
          self.setState({id:data.data})
          });
      }


      render(){
        console.log(this.state.id);
        return(
          <div className="w3-container">
          <div className="w3-display-container">
        <div className="w3-panel w3-border w3-yellow  w3-padding-4 w3-xxlarge  ">
        <p >List Of Students</p>
         <div className="w3-display-right w3-container">
         <Link className="w3-btn-floating w3-yellow" style={{textDecoration:'none',float:'right'}} to="/createstudent">+</Link>

         </div></div>
         </div>


          <ul  className="w3-ul w3-card-4  w3-yellow">  {this.state.post.map(function(item, index) {

                           return (

                                <Link  to="/displaylist" style={{textDecoration:'none'}} key={index}  onClick={this.handleClick}>
                                <li className=" w3-hover-green w3-padding-16" >
                                <img src={require('./3.jpg')} className="w3-left w3-circle w3-margin-right " width="60px" height="auto" />
                                <span>{item.Firstname}</span><br/><br/>
                                </li>
                                 </Link>




    )}
    )}
    </ul>



    </div>
        );
      }
    }
    export default Premontessori;

最佳答案

当您将this.handleClick传递给Link时，在事件发生并执行函数时，后者会在Link实例的上下文中发生。并且由于Link组件没有handleClick属性，因此操作失败。

尝试以在实例化时绑定到当前组件的方式声明handleClick：

handleClick = event => {
  alert(event);
}

或在Function#bind函数中使用render：

<Link onClick={this.handleClick.bind(this)} />