React 受控组件,Hooks 方式!

前端小智
作者: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} />
    </>
  )
}

image

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

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

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

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

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

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

  1. 定义保存input值的状态:const [value, setValue] = useState(")
  2. 创建事件处理程序,该事件处理程序在值更改时更新状态:
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...,可以自行试试。

image

对输入进行防抖

在前面的实现中,只要在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>
  );
}

image

打开演示(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和完善,大家面试可以参照考点复习,另外关注公众号,后台回复福利,即可看到福利,你懂的。

阅读 581

终身学习者
我要先坚持分享20年,大家来一起见证吧。
avatar
前端小智
前端开发工程师

我不是什么大牛,我其实想做的就是一个传播者。内容可能过于基础,但对于刚入门的人来说或许是一个窗口,一个解惑之窗。我要先坚持分享20年,大家来一起见证吧。

58.2k 声望
10.2k 粉丝
0 条评论
你知道吗?

avatar
前端小智
前端开发工程师

我不是什么大牛,我其实想做的就是一个传播者。内容可能过于基础,但对于刚入门的人来说或许是一个窗口,一个解惑之窗。我要先坚持分享20年,大家来一起见证吧。

58.2k 声望
10.2k 粉丝
宣传栏