react class组件事件绑定this和事件传递参数方式--日常总结

1.组件事件绑定this三种方式：

方式一:事件绑定在初始化constructor中

this.handleClick1 = this.handleClick1.bind(this)

方式二: 使用实验性的 public class fields 语法，你可以使用 class fields 正确的绑定回调函数,

handleClick2 = () => {
  console.log("点击事件点击2")
 }

方式三.使用箭头回调函数方式调用事件方法，函数后面加()调用

 <button onClick={()=> this.handleClick3()}>
    测试点击事件绑定3
   </button>

完整组件例子代码展示：

class ClickHandler extends React.Component {
            constructor(props) {
                super(props);

                // 为了在回调中使用 `this`，这个绑定是必不可少的
                // 绑定方式一
                this.handleClick1 = this.handleClick1.bind(this);
            }

             // 绑定方式一
             handleClick1() {
               console.log("点击事件点击1")
            }

             // 绑定方式二 使用实验性的 public class fields 语法，你可以使用 class fields 正确的绑定回调函数
             handleClick2 = () => {
                console.log("点击事件点击2")
             }

              // 绑定方式三 回调中使用箭头函数
             handleClick3(){
                console.log("点击事件点击3")
             }

            render() {
                return (
                    <div>
                        <button onClick={this.handleClick1}>
                            测试点击事件绑定1
                        </button>

                        <button onClick={this.handleClick2}>
                            测试点击事件绑定2
                        </button>

                        <button onClick={()=> this.handleClick3()}>
                            测试点击事件绑定3
                        </button>
                    </div>
                );
            }
            }

            ReactDOM.render(
                <ClickHandler />,
                 document.getElementById('root')
            );

2.组件事件传递参数：
方式一 箭头回调函数方式调用并传参数

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>

方式二 bind绑定this同时传参数

<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>