Javascript ReactJS-鼠标单击无需单击即可触发

我不熟悉React.JS并尝试在渲染组件内的元素上创建单击事件

这是我的密码：

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>
   );

 }
};

class InputPanel扩展了React.Component{
handleClick（i，j）{
this.props.dispatch（actions.someMethod（））；
//e.预防违约（）；
}  
render（）{
const{dispatch，board}=this.props；
返回(
{
board.map（（行，i）=>(
{row.map（（cell，j）=>{cell}）
))
}
);
}
};

我的问题是“handleClick”在页面加载后被触发，没有任何鼠标点击

我已经阅读了React.JS lifecycle，并考虑在

componentDidMount

方法中注册单击事件，但我真的不确定：

有没有更简单的方法？（或者：我是不是做错了什么导致点击？）

如果添加

componentDidMount

方法是正确的方法，那么如何获得在

render

方法中创建的元素

---

在render中调用此函数。您应该只传输函数和

bind

params

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

---

这是因为您正在调用此.handleClick（）函数，而不是将函数定义作为onClick prop提供

尝试如下更改div行：

this.handleClick（i，j）}>{cell}

您应该使用

.bind（）

class InputPanel扩展了React.Component{
handleClick（i，j）{
this.props.dispatch（actions.someMethod（））；
//e.预防违约（）；
}  
render（）{
const{dispatch，board}=this.props；
返回(
{
board.map（（行，i）=>(
{row.map（（cell，j）=>{cell}）
))
}
);
}
};

在将回调作为道具传递时，您应该不要使用

.bind

。这是有道理的。您可以阅读更多关于如何在不破坏React性能的情况下通过回调的内容

总结：

确保您没有调用函数，而是在道具中将函数作为处理程序传递

确保不要在每个渲染上创建函数，为此，需要在父组件中绑定处理程序，将所需的数据（如迭代索引）向下传递到子组件，并让它使用所拥有的数据调用父组件的处理程序

理想情况下，您应该为行创建另一个组件并将回调传递到那里。此外，理想情况下，您应该在父组件的构造函数（或componentWillMount）中绑定onClick。否则，每次render运行时都会创建一个新函数（在匿名函数处理程序

（）=>{this.onClick（）}

和

this.onClick.bind

中），并击败React的vdom diff，导致每一行每次都重新render

因此：

class InputPanel扩展了React.Component{
构造函数（）{
超级（）；
this.handleClick=this.handleClick.bind（this）；
}
handleClick（i，j）{
this.props.dispatch（actions.someMethod（））；
//e.预防违约（）；
}  
render（）{
const{dispatch，board}=this.props；
返回(
{board.map（（行，i）=>
{row.map（（单元格，j）=>）}
)}
);
}
};
类。组件{
构造函数（）{
超级（）；
this.handleClick=this.handleClick.bind（this）；
}
handleClick（）{
this.props.onClick（this.props.i，this.props.j）；
}
render（）{
返回{this.props.cell}
}
} 

@Pranesh onClick prop将函数引用作为其值。但是onClick={this.handleClick（i，j）}是一个函数调用。如果没有要传递到函数中的参数，我们可以只给出onClick={this.handleClick}，但是由于也要传递参数（i，j），最好的方法是给出一个匿名函数定义（）=>这个.handleClick（i，j）然后将其作为onClick prop值传递，以便onClick将被分配一个对该匿名函数的引用。在传递prop时创建一个新的匿名函数将绕过React diffing机制，该机制会导致行始终重新渲染。这样，每次运行渲染时，

.bind

将创建一个新函数，从而提高性能rse（每次重新渲染行）。我认为您有一个错误。。这不是假设为：）}我还发现，除了渲染中的{cell}之外，您还需要在“Digit”上创建“cellProp”，如：'cellProp={cell}'@ohadino correct，我专注于回调问题，所以忘记了

单元格

属性–在

组件中绑定回调也可能是个好主意。

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>
   );

 }
};

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>
  }
}