受控组件与非受控组件：React 中用户输入管理的指南

前端

2023-10-16 20:29:16

React 中的受控组件和非受控组件

作为一名初次涉足 React 应用开发的开发者，你可能会困惑于“受控组件”和“非受控组件”的概念。了解这两类组件之间的差异至关重要，因为它会影响你在 React 应用程序中管理和处理用户输入的方式。

受控组件

在受控组件中，React 应用负责管理组件的状态，包括存储和更新组件的值。也就是说，组件的值是由 React 状态管理的，而不是由 DOM 元素本身。

使用受控组件的好处：

提供更好的表单验证和错误处理。
允许轻松地同步组件状态和用户输入。
简化表单值的处理，因为所有值都存储在 React 状态中。

使用受控组件的示例：

import React, { useState } from 'react';

const App = () => {
  const [inputValue, setInputValue] = useState('');

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

  return (
    <input type="text" value={inputValue} onChange={handleChange} />
  );
};

export default App;

在这个示例中，inputValue状态变量存储输入值，handleChange函数通过调用setInputValue函数更新状态，从而保持 React 状态与输入值同步。

非受控组件

与受控组件相反，在非受控组件中，DOM 元素自身负责管理其值。React 应用不管理组件状态，而是通过 DOM 元素上的值访问用户输入。

使用非受控组件的好处：

在某些情况下更简单，因为不需要维护组件状态。
适用于不需要复杂表单验证或错误处理的情况。

使用非受控组件的示例：

import React from 'react';

const App = () => {
  const handleSubmit = (event) => {
    event.preventDefault();
    const inputValue = event.target.querySelector('input').value;
    console.log(inputValue);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" />
      <button type="submit">提交</button>
    </form>
  );
};

export default App;