Question

我想通过点击来获取学生的身份证明。但是它给了我像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;

Answer 1

当您将this.handleClick传递给Link时，在事件发生且函数执行的那一刻，后者发生在Link实例的上下文中。由于链接组件没有handleClick道具，因此操作失败。

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

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

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

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

Answer 2

Link已经有一个用于点击的内部hanlder，它被重定向到另一个Route，它是一个标记解决方案。
React路由器还为重定向提供了非标记解决方案browserHistory.push。

因此：

   import {browserHistory} from 'react-router'

   handleClick(event) {
     event.preventDefault();
     alert('you clicked me');
     browserHistory.push('/displaylist');
   }

    <a  style={{textDecoration:'none'}} key={index}  onClick={this.handleClick}></a>

而不是

   import {Link} from 'react-router'

   <Link  to="/displaylist" style={{textDecoration:'none'}} key={index}  onClick={this.handleClick}>

如何在reactjs中使用带有<link />的onClick事件

2 个答案: