react事件绑定的四种方式及ref

方式一：

<button onClick={()=>{console.log(this.text)}}>方式一</button>

直接写在内部，不会导致this丢失，但是代码不够直观

方式二：

<button onClick={this.click2.bind(this,"传了一个参数")}>方式二</button>

click2(param){
    console.log(this.text)
    console.log(param)
}

//您也可以在构造中绑定
  constructor(props) {
    super(props);
    this.click2 = this.click2.bind(this);
  }

this会发生改变，因此需要使用bind()来更正this指向，同样的还有call()、apply()方法，call()、apply()方法会自动执行触发，bind为手动选择触发

方式三：

<button onClick={this.click3}>方式三</button>

  click3=()=>{
    console.log(this.text)
  }

箭头函数可以直接引用this，注意若是在this.click3后面加个()的话则会自动触发点击事件

方式四：

<button onClick={()=>this.click4()}>方式四</button>

  click4=()=>{
    console.log(this.text)
  }

可以直接引用this，可以进行传参

import ReactDOM from 'react-dom/client';
import React, { Component } from 'react'


export default class Ikun extends Component {

  text="爱坤"

  render() {
    return (
      <div>
        <input></input>
        <button onClick={()=>{console.log(this.text)}}>方式一</button>
        <button onClick={this.click2.bind(this,"传了一个参数")}>方式二</button>
        <button onClick={this.click3}>方式三</button>
        <button onClick={()=>this.click4()}>方式四</button>
      </div>
    )
  }

  click2(param){
    console.log(this.text)
    console.log(param)
  }
  click3=()=>{
    console.log(this.text)
  }
  click4=()=>{
    console.log(this.text)
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Ikun />
);

ref用于获取指定节点元素,使用示例如下

import ReactDOM from 'react-dom/client';
import React, { Component } from 'react'


export default class Ikun extends Component {

    constructor(props) {
        super(props);
        this.click = this.click.bind(this);
        this.inputDom=React.createRef();
    }

    render() {
        return (
            <div>
                <input ref={this.inputDom}></input>
                <button onClick={() => this.click()}>点击</button>
            </div>
        )
    }

    click=()=>{
        console.log(this.inputDom.current.value)
    }

}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Ikun />
);

react事件绑定的四种方式及ref

猜你喜欢