Reactjs - Mouseclick Gets Triggered Without A Click

I'm new to React.JS and trying to create a click event on an element inside a rendered component. Here is my code: class InputPanel extends React.Component{ handleClick(i,j) {

Solution 1:

You should not use .bind when passing the callback as a prop. There’s a ESLint rule for that. You can read more about how to pass callback without breaking React performance here.

Summary:

1. make sure you aren’t calling functions but pass functions as handlers in your props.
2. make sure you do not create functions on every render, for that, you need to bind your handlers in parent component, pass correct the required data (such as indices of iteration) down the child component and have it call the parent’s handler with the data it has

Ideally you’d create another component for the rows and pass the callback there. Moreover, ideally you’d bind the onClick in the parent component’s constructor (or componentWillMount). Otherwise every time render runs a new function is created (in both anonymous function handler () => { this.onClick() } and this.onClick.bind and defeat React’s vdom diff causing every row to rerender every time.

So:

classInputPanelextendsReact.Component{
  constructor() {
    super();
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(i,j) {    
    this.props.dispatch(actions.someMethod());
   // e.preventDefault();
  }  

  render() {
    const { dispatch, board } = this.props;

    return(
   <div>           
      {board.map((row, i) => <div>
          {row.map((cell, j) => <Digit 
            onClick={this.handleClick})
            i={i} 
            j={j}
            cell={cell}
          />)}
      </div>)}
  </div>
   );

 }
};

classDigitextendsReact.Component{
  constructor() {
    super();
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.props.onClick(this.props.i, this.props.j);
  }

  render() {
    return <div 
      className="digit"
      onClick={this.handleClick}
    >{this.props.cell}</div>
  }
} 

Solution 2:

It is because you are calling this.handleClick() function instead of providing a function definition as onClick prop.

Try changing the div line like this:

<div className="digit" onClick={ () =>this.handleClick(i,j) }>{cell}</div>

Also you have to bind this.handleClick() function. You can add a constructor and bind all the member functions of a class there. that's the best practice in ES6.

constructor(props, context) {
  super(props, context);
  this.handleClick = this.handleClick.bind(this);
}

Solution 3:

You call this function in render. You should only transfer function and bind params.

onClick={this.handleClick.bind(null,i,j)}

Solution 4:

You should use .bind().

classInputPanelextendsReact.Component{

  handleClick(i,j) {    
    this.props.dispatch(actions.someMethod());
   // e.preventDefault();
  }  

  render() {
    const { dispatch, board } = this.props;

    return(
   <div>           
      {
        board.map((row, i) => (
        <div>{row.map((cell, j) => <divclassName="digit"onClick={this.handleClick.bind(null,i,j)}>{cell}</div>)}</div>
      ))
    }
  </div>
   );

 }
};