javascript - How to use onClick event with <Link> in reactjs - Stack Overflow

admin管理员组

文章数量:1313752

i am trying to get the Id of a student by clicking on the . But it's giving me error like TypeError: Cannot read property 'handleClick' of undefined. What's wrong in here.?? First atleast i need to get this handleClick function to be working.

This is my react code:

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

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

      }

      handleClick(event) {
          alert(event);
        }


    ponentDidMount(){
       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;

i am trying to get the Id of a student by clicking on the . But it's giving me error like TypeError: Cannot read property 'handleClick' of undefined. What's wrong in here.?? First atleast i need to get this handleClick function to be working.

This is my react code:

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

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

      }

      handleClick(event) {
          alert(event);
        }


    ponentDidMount(){
       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;

• javascript
• reactjs

Share Improve this question Follow edited Feb 10, 2017 at 10:53 Ivan Vasiljevic 5,71822 gold badges3333 silver badges3535 bronze badges asked Feb 10, 2017 at 10:51 Abhilash MuttalliAbhilash Muttalli 1,36966 gold badges1919 silver badges2424 bronze badges 1

• 1 try onClick={this.handleClick.bind(this)} – Syam Pillai Commented Feb 10, 2017 at 10:57

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

When you pass this.handleClick to Link, at the moment the event happens and function gets executed, the latter happens in context of instance of Link. And since Link ponent doesn't have handleClick prop, the operation fails.

Try to declare handleClick in a way it gets bound to current ponent at the time of instantiation:

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

Or use Function#bind in your render function:

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

• Link is already has an internal hanlder for clicking which is redirection to another Route , and it is a markup solution .

• React router provides also a non-markup solution to redirect which is browserHistory.push.

Thus :

   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>

Instead of

   import {Link} from 'react-router'

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

本文标签： javascriptHow to use onClick event with ltLinkgt in reactjsStack Overflow