レスポンスイベント:React Event:onEvent

はんのうじしょう
はんのうじしょうとくせい

Reactアクティビティは、小文字ではなくCAMEL CASEを使用します.

JSXを使用して、'문자열()'ではなく{함수}にEvent Handlerを渡します.

イベントハンドラをリアクターに転送するイベント1:クラスメソッドを使用して作成したイベントハンドラ

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

応答中のイベント2:匿名/矢印関数適用イベントハンドラ(BEST)

<button onEvent={ () => { setState(state+1) }} > 
  카운트버튼 
</button>

既存のHTMLのイベント

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

Reactはfalseを返し、デフォルトの動作を防止できません.preventDefaultメソッドを明示的に呼び出す必要があります.

反応を防ぐデフォルトの動作

function Form() {
  function handleSubmit(e) {
    e.preventDefault();		// e 라는 합성이벤트의 기본동작을 방지하는 preventDefault()메소드
    console.log('You clicked submit.');
  }

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

従来のデフォルトの動作を回避

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

レスポンスイベントの例

function Like() { // Like 함수형 컴포넌트
  let [좋아요,좋아요추가] = useState(0); 
  //state 좋아요의 초기값을 0으로 할당 및 state변경함수 할당 using useState hook

  return (
    <div className="Like">
      <div className="title">좋아요 기능</div>
      <div className="list">
        <button onClick ={() => { // react 이벤트 추가
          좋아요추가(좋아요+1)
        }}> {' '}좋아요 추가하기
        </button>
        <h3>{좋아요}</h3>
      </div>
    </div>
  )
}