React受控组件，Hooks方式!

本文已经过原作者 Shadeed 授权翻译。

网站建设哪家好，找成都创新互联公司！专注于网页设计、网站建设、微信开发、微信小程序定制开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了仁布免费建站欢迎大家使用！

React 提供了两种方法来访问input字段的值:使用受控或非受控组件。我更喜欢受控组件，因为我们可以通过组件的状态读取和设置input的值。

在这篇文章中，我们来看看如何使用React Hook 实现受控组件。

1.受控组件

假设我们有一个简单的文本字段，并且想访问其值：

 
 
 
 

  
  
  
  
import { useState } from 'react';
  
  
  
  

  
  
  
  
function MyControlledInput({ }) {
  
  
  
  
  const [ value, setValue ] = useState('');
  
  
  
  
  const onChange = (event) => {
  
  
  
  
    setValue(event.target.value);
  
  
  
  
  }
  
  
  
  
  
  
  
  
  
  return (
  
  
  
  
    <>
  
  
  
  
        
Input value: {value}
  
  
  
  
        
  
  
  
  
    
  
  
  
  
  )
  
  
  
  
}
 
 
 
 

打开示例(https://codesandbox.io/s/controlled-component-uwf8n)并在输入框中输入。可以看到 value 变量包含input字段中的值，并且在每次输入新值时，它也会更新。

input字段受到控制，因为 React 从状态设置其值。当用户在input 中输入内容时，onChange处理程序会使用从事件对象event.target.value访问的输入值来更新状态。

value变量表示用户真实输入的值。每次需要访问用户在input字段中输入的值时，只需读取value状态变量。

受控组件方法可以帮助我们访问任何输入类型的值:常规文本输入、textarea、select 等。

2. 受控组件中的3个步骤中

设置受控组件需要3个步骤：

定义保存input值的状态:const [value, setValue] = useState(")。

创建事件处理程序，该事件处理程序在值更改时更新状态：

 
 
 
 

  
  
  
  
const onChange = event => setValue(event.target.value);
 
 
 
 

3.为input字段分配状态值，并添加事件处理程序：。

3. state 作为真实的数组源

我们看一个更复杂的例子。页面中有一组员工姓名列表。我们需要添加一个 input字段，当用户在此字段中键入内容时，员工列表将按姓名进行过滤。

 
 
 
 

  
  
  
  
function FilteredEmployeesList({ employees }) {
  
  
  
  
 const [query, setQuery] = useState('');  
  
  
  
  
 const onChange = event => setQuery(event.target.value);
  
  
  
  
  const filteredEmployees = employees.filter(name => {
  
  
  
  
    return name.toLowerCase().includes(query.toLowerCase());
  
  
  
  
  });
  
  
  
  

  
  
  
  
  return (
  
  
  
  
    

  
  
  
  
 
Employees List
  
  
  
  
 
  
  
  
  
        type="text" 
  
  
  
  
 value={query}        onChange={onChange}      />
  
  
  
  
 
  
  
  
  
 {filteredEmployees.map(name => 
{name}
)}