问题原因：对js或es语法不熟悉重点关注以下两个问题：React的onClick方法和HTML的onclick的区别2.addEventListener和onClick的区别这个指向问题1.React的onClick该方法不同于HTML的onclick。React事件以驼峰命名而不是纯小写命名。使用JSX语法时，您需要传入一个函数作为事件处理程序，而不是字符串。html中的onclick传入一个脚本。React的另一个区别是您不能通过返回false来阻止默认行为。您必须明确使用preventDefault。例如，要防止传统HTML中表单的默认提交行为，可以这样写：2.html中addEventListener和onclick的区别onclick事件只能同时指向单个对象，即next点击会覆盖之前的addEventListener为一个事件注册多个监听器，依次执行，不会被覆盖。addEventListener对任何DOM都有效，onclick仅限于HTML。addEventListener可以控制监听器的触发阶段（捕获/冒泡）。对于多个相同的事件处理器，不会重复触发，不需要手动使用removeEventListener清除IE9。使用attachEvent和detachEvent来使用React时，一般不需要使用addEventListener来为创建的DOM元素添加监听器。实际上，您只需要在元素最初呈现时添加监听器。3.这个绑定问题找到了onClick={()=>this.handleClick(i)}和onClick={this.handleClick}两种写法。在JavaScript中，类的方法默认不绑定this。箭头函数的问题是每次呈现LoggingButton时都会创建不同的回调函数。在大多数情况下，这很好，但是如果回调函数作为prop传递给子组件，这些组件可能会执行额外的重新渲染。我们通常建议在构造函数中进行绑定或使用类字段语法来避免此类性能问题。bind绑定就是在构造函数中添加this.handleClick=this.handleClick.bind(this)JavaScript，让函数体内可以引用当前环境的其他变量。这样做的设计目的是为了在函数体内引用函数当前运行的环境。
