React受控组件，Hooks方式！
时间：2023-03-12 22:43:05
科技观察
本文已获得原作者Shadeed授权翻译。React提供了两种访问输入字段值的方法：使用受控或非受控组件。我更喜欢受控组件，因为我们可以通过组件的状态读取和设置输入的值。在这篇文章中，让我们看看如何使用ReactHooks实现受控组件。1.受控组件假设我们有一个简单的文本字段，想要访问它的值：import{useState}from'react';functionMyControlledInput({}){const[value,setValue]=useState('');constonChange=(event)=>{setValue(event.target.value);}return(<
Inputvalue:{value}
>)}打开例如（https://codesandbox.io/s/controlled-component-uwf8n）并在输入框中输入。您可以看到value变量包含来自输??入字段的值，并且每次输入新值时，它也会更新。输入字段是受控的，因为React从状态中设置它的值。当用户键入输入时，onChange处理程序使用从事件对象event.target.value访问的输入值更新状态。value变量表示用户输入的实际值。每次您需要访问用户在输入字段中输入的值时，只需读取值状态变量即可。受控组件方法帮助我们访问任何输入类型的值：常规文本输入、文本区域、选择等。2.受控组件中的3个步骤设置受控组件需要3个步骤：定义保存输入值的状态：const[value,setValue]=useState(")。创建一个事件处理程序，该事件处理程序设置在值更改时更新状态：constonChange=event=>setValue(event.target.value);3.将状态值分配给输入字段并添加事件处理程序：.3.状态作为一个真正的数组源让我们看一个更复杂的例子。页面中有一组员工姓名列表。我们需要添加一个输入字段，当用户在这个字段中输入时，员工列表将按姓名过滤。functionFilteredEmployeesList({employees}){const[query,setQuery]=useState('');constonChange=event=>setQuery(event.target.value);constfilteredEmployees=employees.filter(name=>{returnname.toLowerCase()。includes(query.toLowerCase());});return(
EmployeesList
{filteredEmployees.map(name=>{name}
)} );}打开演示(https://codesandbox.io/s/gracious-dawn-29qi6?file=/src/App.js），大家可以自己试试。对输入进行去抖动在之前的实现中，只要在输入中输入一个字符，列表就会立即被过滤。这并不总是很方便，因为它会在输入查询时分散用户的注意力。我们通过debounce改进了用户体验：在上次更改后以400毫秒的延迟过滤列表。import{useDebouncedValue}from'./useDebouncedValue';functionFilteredEmployeesList({employees}){const[query,setQuery]=useState('');constdebouncedQuery=useDebouncedValue(query,400);constonChange=event=>setQuery(event.target.value);constfilteredEmployees=employees.filter(name=>{returnname.toLowerCase().includes(debouncedQuery.toLowerCase());});return(
EmployeesList
{filteredEmployees.map(name=>{name}
)} );}打开demo（https://codesandbox.io/s/affectionate-swartz-9yk2u?file=/src/App.js），然后在input中输入和释放值进行查询。员工列表不会在您键入时过滤，而是在最近一次按键后400毫秒过滤。下面是useDebouncedValue()导出函数的实现wait);return()=>clearTimeout(id);},[value]);returnbouncedValue;}受控组件是一种在React中访问输入字段值的便捷技术。它不使用引用，而是充当访问输入值的单一真实来源。~完了，小智，我要去洗碗了，下次见~作者：Shadeed译者：前端小智以下二维码。转载本文请联系大千世界公众号。
