作者：Shadeed译者：前端小智来源：dmitripavlutin再次点赞，微信搜索【大千世界】，B站关注【前端小智】这个没有大厂背景，但是有向上的积极态度。本文已收录到GitHubhttps://github.com/qq44924588...，文章已分类，也整理了很多我的文档和教程资料。最近开源了一个Vue组件，但是还不够完善。欢迎大家一起完善，也希望大家能给个star支持一下。谢谢。github地址：https://github.com/qq44924588...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/cont....可以看到value变量包含了input域中的值，每次输入一个新的值，它也会更新。input域是被控制的，因为React是从状态
当用户在输入中键入内容时，onChange处理程序使用从事件对象event.target.value访问的输入值来更新状态。value变量表示用户输入的实际值。每次您需要访问用户在输入字段中输入的值时，只需读取值状态变量即可。受控组件方法帮助我们访问任何输入类型的值：常规文本输入、文本区域、选择等。2.受控组件中的3个步骤设置受控组件需要3个步骤：定义保存输入值的状态：const[value,setValue]=useState(")。创建一个事件处理程序，在值发生变化时设置该事件处理程序更新状态：constonChange=event=>setValue(event.target.value);3.将状态值赋给输入字段并添加事件处理程序：
。3.state作为一个真正的数组源让我们看一个更复杂的例子。有一个员工姓名列表页面。我们需要添加一个输入字段，当用户在这个字段中输入时，员工列表将按姓名进行过滤。functionFilteredEmployeesList({employees}){const[query,setQuery]=useState('');constonChange=event=>setQuery(event.target.value);constfilteredEmployees=雇员。filter(name=>{returnname.toLowerCase().includes(query.toLowerCase());});return(
员工列表
{filteredEmployees.map(name=>{name}
)} );}打开demo(https://codesandbox.io/s/grac...,自己试试吧。去抖输入在前面实现，只要在输入中输入一个字符，列表就会立即被过滤。这并不总是很方便，因为它会分散用户的注意力。我们通过debounce来提高用户体验：过滤列表后延迟400毫秒最后的改变。从'./useDebouncedValue'导入{useDebouncedValue};functionFilteredEmployeesList({employees}){const[query,setQuery]=useState('');constdebouncedQuery=useDebouncedValue(查询,400);constonChange=event=>setQuery(event.target.value);constfilteredEmployees=employees.filter(name=>{returnname.toLowerCase().includes(debouncedQuery.toLowerCase());});return(
