作者:Shadeed
译者:前端小智
来源:dmitripavlutin
点赞再看,微信搜索【大迁世界】,B站关注【前端小智】这个没有大厂背景,但有着一股向上积极心态人。本文 GitHub
https://github.com/qq44924588... 上已经收录,文章的已分类,也整理了很多我的文档,和教程资料。
最近开源了一个 Vue 组件,还不够完善,欢迎大家来一起完善它,也希望大家能给个 star 支持一下,谢谢各位了。
github 地址:https://github.com/qq44924588...
React 提供了两种方法来访问input
字段的值:使用受控或非受控组件。我更喜欢受控组件,因为我们可以通过组件的状态读取和设置input
的值。
在这篇文章中,我们来看看如何使用React Hook 实现受控组件。
1.受控组件
假设我们有一个简单的文本字段,并且想访问其值:
import { useState } from 'react';
function MyControlledInput({ }) {
const [ value, setValue ] = useState('');
const onChange = (event) => {
setValue(event.target.value);
}
return (
<>
<div>Input value: {value}</div>
<input value={value} onChange={onChange} />
</>
)
}
打开示例(https://codesandbox.io/s/cont...。可以看到 value
变量包含input
字段中的值,并且在每次输入新值时,它也会更新。
input
字段受到控制,因为 React 从状态<input value = {value} ... />
设置其值。 当用户在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
字段分配状态值,并添加事件处理程序:<input type="text" value={value} onChange={onChange} />
。
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 (
<div>
<h2>Employees List</h2>
<input
type="text"
value={query} onChange={onChange} />
<div className="list">
{filteredEmployees.map(name => <div>{name}</div>)}
</div>
</div>
);
}
打开演示(https://codesandbox.io/s/grac...,可以自行试试。
对输入进行防抖
在前面的实现中,只要在input
中输入一个字符,就会立即过滤列表。这并不总是很方便,因为在输入查询时它会分散用户的注意力。
我们通过debounce
来改善用户体验:在最后一次更改后,以400毫秒的延迟过滤列表。
import { useDebouncedValue } from './useDebouncedValue';
function FilteredEmployeesList({ employees }) {
const [query, setQuery] = useState('');
const debouncedQuery = useDebouncedValue(query, 400);
const onChange = event => setQuery(event.target.value);
const filteredEmployees = employees.filter(name => {
return name.toLowerCase().includes(debouncedQuery.toLowerCase()); });
return (
<div>
<h2>Employees List</h2>
<input
type="text"
value={query}
onChange={onChange}
/>
<div className="list">
{filteredEmployees.map(name => <div>{name}</div>)}
</div>
</div>
);
}
打开演示(https://codesandbox.io/s/affe...,然后在input
中输放值进行查询。员工列表不会在你打字时进行过滤,而是在最近一次按下键400毫秒后进行过滤。
下面是useDebouncedValue()
的实现
export function useDebouncedValue(value, wait) {
const [debouncedValue, setDebouncedValue] = useState(value);
useEffect(() => {
const id = setTimeout(() => setDebouncedValue(value), wait);
return () => clearTimeout(id);
}, [value]);
return debouncedValue;
}
受控组件是访问React中input
字段的值的一种方便的技术。它不使用引用,而是作为访问input
值的单一真实源。
~ 完,我们小智,我要去刷碗了,下期再见~
代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
原文:https://dmitripavlutin.com/co...
交流
文章每周持续更新,可以微信搜索「 大迁世界 」第一时间阅读和催更(比博客早一到两篇哟),本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录,整理了很多我的文档,欢迎Star和完善,大家面试可以参照考点复习,另外关注公众号,后台回复福利,即可看到福利,你懂的。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。