React 表单与事件学习笔记

React 是一个非常流行的 JavaScript 库，它提供了一种构建用户界面的高效方式。在 React 中，表单和事件是非常重要的概念。本文将介绍 React 中表单和事件的使用方法，并提供一些示例。

表单

React 中的表单与 HTML 中的表单类似，但有一些不同之处。在 React 中，表单元素的值是被组件的状态管理的，而不是被 DOM 直接管理的。这使得表单处理更容易，并且允许 React 组件集成到复杂的表单中。

受控组件

React 中的表单组件可以是受控组件或非受控组件。受控组件是指表单元素的值被 React 组件的状态所控制。这意味着当用户输入内容时，该内容将更新 React 组件的状态，并反过来重新渲染组件。下面是一个简单的例子：

jsxCopy Code
import React, { useState } from 'react'

function Form() {
  const [value, setValue] = useState('')

  function handleChange(event) {
    setValue(event.target.value)
  }

  return (
    <form>
      <label>
        Name:
        <input type="text" value={value} onChange={handleChange} />
      </label>
      <p>{value}</p>
    </form>
  )
}

export default Form

在上面的例子中，我们定义了一个 Form 组件，并在其中使用了一个 useState 钩子来创建 value 状态。我们将 value 的值设置为一个空字符串，并将其传递给 <input> 元素的 value 属性，以便 React 控制该元素的值。我们还定义了一个 handleChange 函数，以在输入框中的文本发生变化时更新 value 状态。最后，我们使用 <p> 元素来显示输入框中的值。

非受控组件

相比之下，非受控组件是指表单元素的值不被 React 组件的状态所控制，而是由 DOM 直接管理的。这通常用于需要访问 DOM 中某些属性或方法的情况。以下是一个例子：

jsxCopy Code
import React, { useRef } from 'react'

function Form() {
  const inputRef = useRef(null)

  function handleSubmit(event) {
    event.preventDefault()
    console.log(inputRef.current.value)
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" ref={inputRef} />
      </label>
      <button type="submit">Submit</button>
    </form>
  )
}

export default Form

在上面的例子中，我们定义了一个 Form 组件，并在其中使用了一个 useRef 钩子来创建 inputRef 引用。我们将 inputRef 传递给 <input> 元素的 ref 属性，以便我们可以在处理表单提交时访问输入框的值。我们还定义了一个名为 handleSubmit 的函数来处理表单提交事件，并使用 console.log 将输入框的值打印到控制台中。

事件处理

React 中的事件处理与 HTML 中的事件处理类似，但也有一些不同之处。在 React 中，事件是被组件的方法处理的，而不是通过将处理程序赋值给 DOM 元素上的属性来处理的。

方法绑定

在 React 中，我们可以像这样为事件绑定方法：

jsxCopy Code
import React from 'react'

class Button extends React.Component {
  handleClick() {
    console.log('clicked')
  }

  render() {
    return <button onClick={this.handleClick}>Click me</button>
  }
}

export default Button

在上面的例子中，我们定义了一个 Button 组件，并在其中定义了一个名为 handleClick 的方法来处理按钮点击事件。我们将 this.handleClick 传递给 <button> 元素的 onClick 属性，以便 React 调用该方法。

箭头函数

另一种常见的事件处理方法是使用 ES6 箭头函数。这种方法通常用于避免在构造函数中绑定方法。以下是一个例子：

jsxCopy Code
import React from 'react'

function Button() {
  function handleClick() {
    console.log('clicked')
  }

  return <button onClick={() => handleClick()}>Click me</button>
}

export default Button

在上面的例子中，我们定义了一个 Button 组件，并在其中定义了一个名为 handleClick 的函数来处理按钮点击事件。我们将一个箭头函数传递给 <button> 元素的 onClick 属性，该函数调用 handleClick 函数。

示例

下面是一个使用 React 表单和事件处理的示例：

jsxCopy Code
import React, { useState } from 'react'

function Form() {
  const [name, setName] = useState('')
  const [email, setEmail] = useState('')

  function handleNameChange(event) {
    setName(event.target.value)
  }

  function handleEmailChange(event) {
    setEmail(event.target.value)
  }

  function handleSubmit(event) {
    event.preventDefault()
    console.log(`Name: ${name}, Email: ${email}`)
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={name} onChange={handleNameChange} />
      </label>
      <br />
      <label>
        Email:
        <input type="email" value={email} onChange={handleEmailChange} />
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  )
}

export default Form

在上面的示例中，我们定义了一个 Form 组件，并在其中使用两个 useState 钩子来创建 name 和 email 状态。我们将这些状态分别传递给两个输入框，并使用 handleNameChange 和 handleEmailChange 方法来处理这些输入框的变化。最后，我们定义了一个 handleSubmit 方法来处理表单提交事件，并在控制台上打印出用户输入的名称和电子邮件地址。

结论

React 中的表单和事件处理是非常重要的概念。在本文中，我们了解了如何在 React 中使用受控组件和非受控组件来处理表单，并学习了如何使用方法绑定和箭头函数来处理事件。我们还提供了一个完整的示例，以演示这些概念如何在实践中工作。