React 表单&受控元素

设德兰
424 阅读5分钟

1 html表单元素

什么是表单元素？

在html中，有多种标签专门用于在表单中接收用户输入，这类标签被称为表单元素。

<form>元素

<form> 元素本身不接收用户输入，因此它并非表单元素。实际上，<form> 元素是用于创建整个表单的容器，它定义了一个与服务器交互的表单，并包含了用于接收用户输入的各种表单元素。

它可以包含 <input>、<textarea>、<select>、<button> 等表单元素，以及其他相关的标记，如 <label>、<fieldset> 等。

html中有哪些表单元素？

HTML中有多种表单元素可用于接收用户的输入。以下是一些常见的HTML表单元素：

  1. <input>：用于创建各种类型的表单输入字段，如文本框、密码框、单选按钮、复选框等。通过 type 属性来指定不同的输入类型。
  2. <textarea>：用于创建多行文本输入框，允许用户输入大段文本。
  3. <select> 和 <option>：用于创建下拉列表框，用户可以从列表中选择一项或多项。<select> 标签用于定义下拉列表，而 <option> 标签用于定义每个可选项。
  4. <button>：用于创建按钮，可以用作表单提交按钮或自定义按钮。
  5. <label>：用于为表单元素创建关联的标签文本，提高可用性和可访问性。
  6. <fieldset> 和 <legend>：用于创建表单的组合和分组，<fieldset> 标签用于创建一个表单字段集合，而 <legend> 标签用于为该字段集合添加标题。
  7. <datalist> 和 <option>：用于创建自动完成或建议输入的下拉列表。<datalist> 标签定义一个可选项列表，而 <option> 标签定义每个可选项。
  8. <progress>：用于显示进度条，可用于显示表单提交或操作的进度。

代码示例

下面是一个html表单示例：

<form action="/submit" method="POST">
  <fieldset>                                             // <fieldset>创建分组表单
    <legend>Personal Information</legend>                // <legend>为分组表单创建标题
    <div>
      <label for="name">Name:</label>                    // <label>创建关联的标签文本
      <input type="text" id="name" name="name" required> // <input>文本输入
    </div>
    <div>
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" required>
    </div>
    <div>
      <label for="phone">Phone:</label>
      <input type="tel" id="phone" name="phone" pattern="[0-9]{10}" required>
      <small>Please enter a 10-digit phone number.</small>
    </div>
  </fieldset>
  
  <fieldset>
    <legend>Preferences</legend>
    <div>
      <label for="color">Favorite Color:</label>           
      <select id="color" name="color">                     //<select>和<option>创建下拉列表框
        <option value="red">Red</option>
        <option value="blue">Blue</option>
        <option value="green">Green</option>
      </select>
    </div>
    <div>
      <label>Interests:</label>
      <div>
        <input type="checkbox" id="music" name="interests" value="music">   // 复选框
        <label for="music">Music</label>
      </div>
      <div>
        <input type="checkbox" id="sports" name="interests" value="sports">
        <label for="sports">Sports</label>
      </div>
      <div>
        <input type="checkbox" id="travel" name="interests" value="travel">
        <label for="travel">Travel</label>
      </div>
    </div>
  </fieldset>
  
  <div>
    <button type="submit">Submit</button>
    <button type="reset">Reset</button>          //创建按钮
  </div>
</form>

上述代码会生成一个这样的表单：

image.png

2 React组件中的表单

在React中编写表单需要考虑以下几个方面：

  1. 表单元素的状态管理：使用React的状态（state）来管理表单元素的值和状态变化。通常可以使用React的Hooks（如useState）来处理表单元素的状态。
  2. 表单元素的事件处理：为表单元素绑定事件处理函数，以便在用户与表单交互时更新状态或执行其他操作。常见的事件包括onChange、onSubmit等。
  3. 表单元素的值绑定：将表单元素的值与React的状态进行绑定，使得表单元素的值与状态保持同步。一般通过给表单元素设置value属性和onChange事件来实现双向绑定。

下面是一个简单的示例，展示了如何在React中编写一个表单：

import React, { useState } from 'react';

const MyForm = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleNameChange = (event) => {
    setName(event.target.value);
  };

  const handleEmailChange = (event) => {
    setEmail(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    // 表单提交处理逻辑
    console.log('Name:', name);
    console.log('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 MyForm;

在上述示例中，我们使用了两个状态 name 和 email 来存储表单元素的值。通过绑定 onChange 事件，当输入框的值发生变化时，调用相应的事件处理函数更新状态。在表单提交时，我们通过 onSubmit 事件处理函数执行相应的逻辑，这里仅仅是在控制台打印表单元素的值。

3 受控元素

在React中，受控元素是指表单元素的值受state的控制和管理的元素。

为什么需要受控元素？

react组件拥有并管理的数据是state，表单元素input同样也拥有并管理其value属性。为保证React的单一数据源特性，我们需要将state和value绑定到一起，使React能够追踪和控制表单元素的当前值，并在用户输入或选择时更新组件的状态。

如何创建受控元素？

要创建一个受控元素，你需要：

  1. 使用value属性将表单元素与组件的state值进行绑定
  2. 为input添加change事件，在事件处理程序中，通过事件对象e获取到当前文本框的值
  3. 调用setState方法，将文本框的值作为state状态的最新值

每当用户与受控元素交互时，React会根据用户的输入或选择更新组件状态，并将新的值传递给受控元素的value属性，保持元素的值与状态的同步。

代码示例

下面是一个示例，展示了一个受控的文本输入框：

import React, { useState } from 'react';

function MyForm() {
  const [name, setName] = useState('');

  const handleChange = (event) => {
    setName(event.target.value);
  };

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

在上述示例中，我们使用useState钩子来创建一个名为name的状态变量，并使用setName函数来更新它的值。

在文本输入框中，我们将其值绑定到name状态，并通过onChange事件监听器调用handleChange函数来更新name状态。每当用户在文本输入框中输入内容时，handleChange函数会被触发，并将输入框的新值更新到name状态中。

最后，我们将当前的name状态值显示在一个<p>元素中，以展示受控元素的当前值。

通过使用受控元素，React能够完全掌控表单元素的状态和行为，使得数据的管理和更新更加可控和可预测。

avatar
文章
阅读
粉丝