这篇文章主要介绍“如何理解React受控组件Hooks方式”，在日常操作中，相信很多人在如何理解React受控组件Hooks方式问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何理解React受控组件Hooks方式”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
云县网站建设公司成都创新互联,云县网站设计制作，有大型网站制作公司丰富经验。已为云县上1000家提供企业网站建设服务。企业网站搭建\外贸网站制作要多少钱，请找那个售后服务好的云县做网站的公司定做！
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
{filteredEmployees.map(name => {name}
)} 
