事件处理函数

响应事件

• 使用 React 可以在 JSX 中添加 事件处理函数。
• 其中事件处理函数为自定义函数，
• 它将在响应交互（如点击、悬停、表单输入框获得焦点等）时触发。

1. 你可以通过将函数作为 prop 传递给元素如 <button> 来处理事件。

function Button({ onClick, children }) {
  return <button onClick={onClick}>{children}</button>
}

function PlayButton({ movieName }) {
  function handlePlayClick() {
    alert(`正在播放 ${movieName}！`)
  }

  return <Button onClick={handlePlayClick}>播放 "{movieName}"</Button>
}

function UploadButton() {
  return <Button onClick={() => alert('正在上传！')}>上传图片</Button>
}

export default function Toolbar() {
  return (
    <div>
      <PlayButton movieName="魔女宅急便" />
      <UploadButton />
    </div>
  )
}

2. 必须传递事件处理函数，而非函数调用！ onClick={handleClick} ，不是 onClick={handleClick()}。

export default function Button() {
  function handleClick() {
    alert('你点击了我！')
  }
  return <button onClick={handleClick}>点我</button>
}

3. 你可以单独或者内联定义事件处理函数。
4. 事件处理函数在组件内部定义，所以它们可以访问 props 。
5. 你可以在父组件中定义一个事件处理函数，并将其作为 prop 传递给子组件。
6. 你可以根据特定于应用程序的名称定义事件处理函数的 prop 。

防止事件向上传播 e.stopPropagation()

7. 事件会向上传播。通过事件的第一个参数调用 e.stopPropagation() 来防止这种情况。

防止事件会向上传播

function Button({ onClick, children }) {
  return (
    <button
      onClick={(e) => {
        e.stopPropagation()
        onClick()
      }}>
      {children}
    </button>
  )
}

防止浏览器默认行为 e.preventDefault()

8. 事件可能具有不需要的浏览器默认行为。调用 e.preventDefault() 来阻止这种情况。

export default function Signup() {
  return (
    <form
      onSubmit={(e) => {
        e.preventDefault()
        alert('提交表单！')
      }}>
      <input />
      <button>发送</button>
    </form>
  )
}

9. 从子组件显式调用事件处理函数 prop 是事件传播的另一种优秀替代方案。