首页 / REACT / javascript – ReactJS – 无需点击即可触发MouseClick

javascript – ReactJS – 无需点击即可触发MouseClick

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript – ReactJS – 无需点击即可触发MouseClick，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1998字，纯文字阅读大概需要3分钟。

内容图文

我是React.JS的新手,并尝试在渲染组件内的元素上创建一个click事件.

这是我的代码：

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方法中注册click事件,但我真的不确定：

>有没有更简单的方法？ (或者：我做错了什么导致点击？)
>如果添加componentDidMount方法是正确的方法 – 如何获取我在render方法中创建的元素？

解决方法:

在将回调作为道具传递时,不应使用.bind.那是一个ESLint rule.您可以在不破坏React性能here的情况下阅读有关如何传递回调的更多信息.

摘要：

>确保您没有调用函数,但将函数作为处理程序传递给道具.
>确保不在每个渲染上创建函数,为此,您需要在父组件中绑定处理程序,将所需的数据(例如迭代索引)传递给子组件,并让它调用父组件的处理程序它拥有的数据

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

内容总结

以上是互联网集市为您收集整理的javascript – ReactJS – 无需点击即可触发MouseClick全部内容，希望文章能够帮你解决javascript – ReactJS – 无需点击即可触发MouseClick所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/809834.html

来源：【匿名】