反応イベントバインディングとrefの4つの方法

方法 1:

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

内部に直接記述してもこれが失われることはありませんが、コードは十分に直感的ではありません

方法 2:

<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);
  }

これは変更されるため、bind() を使用してこの点を修正する必要があります。また、call()、apply() メソッド、call()、apply() メソッドはトリガーを自動的に実行し、bind は手動選択です。引き金

方法 3:

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

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

アロー関数はこれを直接参照できます。 this.click3 の後に () を追加すると、クリックイベントが自動的にトリガーされることに注意してください。

方法 4:

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

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

これを直接参照でき、パラメータを渡すことができます

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 />
);

反応イベントバインディングとrefの4つの方法

おすすめ