Reactにイベントを適用する

3457 ワード

はんのうテキストリンク

class App extends React.Component {
  return (
    <div>
      <button>Click Me!</button>
    </div>
  );
}
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

上記アプリケーションコンポーネント.
ボタンをクリックしてalertを開く場合は
Vanilla JSの場合:

<button onclick=”alert(‘hi’)”>Click Me!</button>

こうすればいい.
反応器の場合:

<button onClick={alert(‘hi’)}>Click Me!</button>

このようにすればよいが、実際には、レンダリング時に関数呼び出しの結果がonClickにバインドされるため、何も実行できない.
したがって

<button onClick={()=>alert(‘hi’)}>Click Me!</button>

このようにarrow関数などを用いて呼び出すべきである.

Reference

この問題について(Reactにイベントを適用する), 我々は、より多くの情報をここで見つけました https://velog.io/@gktmd652/React에서-이벤트-적용하기

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

恥ずかしい質問

220416