javascript - ReactJS - MouseClick 在没有点击的情况下被触发

Question

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

 }
};

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

我读过 React.JS 生命周期，并考虑过在 componentDidMount 方法中注册点击事件，但我真的不确定:

1. 有没有更简单的方法？ (或者:我是不是做错了什么触发了点击？)

2. 如果添加 componentDidMount 方法是正确的方法 - 如何获取在 render 方法中创建的元素？

Answer 1

在将回调作为 prop 传递时，您不应该不使用.bind。有一个ESLint rule为了那个原因。您可以阅读更多有关如何在不破坏 React 性能的情况下传递回调的信息 here .

总结:

1. 确保你不是在调用函数，而是在你的 Prop 中将函数作为处理程序传递。
2. 确保您没有在每个渲染器上都创建函数，为此，您需要在父组件中绑定(bind)您的处理程序，将正确的所需数据(例如迭代索引)传递到子组件并让它调用父级的处理程序用它拥有的数据

理想情况下，您会为行创建另一个组件并在那里传递回调。此外，理想情况下，您将在父组件的构造函数(或 componentWillMount)中绑定(bind) onClick。否则每次渲染运行时都会创建一个新函数(在匿名函数处理程序 () => { this.onClick() } 和 this.onClick.bind 中并击败 React 的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>
  }
}