イベントの処理

「反応」領域でのイベントの処理方法は、DOM領域でのイベントの処理方法と非常に類似している.いくつかの構文の違いは次のとおりです.

Reactのイベントでは小文字は使用されません.

JSXを使用して、文字列ではなく関数にイベントハンドラを渡します.

たとえば、HTMLは次のようになります.

<button onclick="activateLasers()">
  Activate Lasers
</button>

Reactではちょっと違います

<button onClick={activateLasers}>  Activate Lasers
</button>

もう1つの違いは、Reactがfalseを返すとデフォルトの動作を防止できないことです.preventDefaultを明示的に呼び出す必要があります.たとえば、次のコードを作成して、通常のHTMLでフォームをコミットするときのデフォルトの動作を防止できます.

<form onsubmit="console.log('You clicked submit.'); return false">
  <button type="submit">Submit</button>
</form>

Reactでは、次のように作成できます.

function Form() {
  function handleSubmit(e) {
    e.preventDefault();    console.log('You clicked submit.');
  }

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
}

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // 콜백에서 `this`가 작동하려면 아래와 같이 바인딩 해주어야 합니다.
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

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

注意JSXコールバックにおけるthisの意味.JavaScriptでは、クラスメソッドのデフォルトはバインディングです.this.handleClickがonClickに渡されると、実際に関数が呼び出されると、thisはundefinedになります.
これは特殊な行為ではなく、JavaScriptでの関数の動作の一部です.通常、onClick={this.handleClick}(()など)を使用せずにメソッドを参照する場合は、メソッドをバインドする必要があります.bindを呼び出すのが不便な場合は、2つの解決策があります.実験的な共通クラスフィールド構文を使用している場合は、クラスフィールドを使用してコールバックを正しくバインドできます.

重要だ!

クラスフィールド構文を使用していない場合は、矢印関数を使用してコールバックすることもできます.

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
    // 이 문법은 `this`가 handleClick 내에서 바인딩되도록 합니다.    return (      <button onClick={() => this.handleClick()}>        Click me
      </button>
    );
  }
}

この構文の問題は、LoggingButtonがレンダリングされるたびに異なるコールバックが生成されることです.ほとんどの場合、これは問題ではありませんが、コールバックがpropsとしてサブエレメントに渡されると、他の再レンダリングも実行できます.このようなパフォーマンスの問題を回避するには、ジェネレータでクラスフィールド構文をバインドまたは使用することをお勧めします.