ReactJS - MouseClick starts without clicking

Question

I am new to React.JS and trying to create a click event for an element inside a rendered component.

Here is my code:

class InputPanel extends React.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) => <div className="digit" 
                                onClick={this.handleClick(i,j)}>{cell}</div>)}</div>
      ))
    }
  </div>
   );

 }
};

My problem is that "handleClick" starts after the page loads without a mouse click!

I read about the React.JS life cycle and thought about registering the click event in the method componentDidMount, but I'm really not sure about this:

• Is there an easier way? (or: Am I doing something wrong that triggers push?)

• If adding a method componentDidMountis the right way - how can I get the element that I create in the method render?

Answer 1

.bind . Theres ESLint . , React .

:

• , , .
• , , , (, ) ,

. , youd onClick ( componentWillMount). , , ( () => { this.onClick() }, this.onClick.bind) Reacts vdom diff, .

:

class InputPanel extends React.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>
   );

 }
};

class Digit extends React.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>
  }
} 

Answer 2

, this.handleClick() onClick prop.

div :

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

Hide result

this.handleClick(). - . ES6.

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

Hide result

Answer 3

. bind params.

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

Answer 4

.bind().

class InputPanel extends React.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) => <div className="digit" 
                                onClick={this.handleClick.bind(null,i,j)}>{cell}</div>)}</div>
      ))
    }
  </div>
   );

 }
};