React受控组件,Hooks方式!

本文已经过原作者 Shadeed 授权翻译。

网站建设哪家好,找成都创新互联公司!专注于网页设计、网站建设、微信开发、微信小程序定制开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了仁布免费建站欢迎大家使用!

React 提供了两种方法来访问input字段的值:使用受控或非受控组件。我更喜欢受控组件,因为我们可以通过组件的状态读取和设置input的值。

在这篇文章中,我们来看看如何使用React Hook 实现受控组件。

1.受控组件

假设我们有一个简单的文本字段,并且想访问其值:

 
 
 
 
  1. import { useState } from 'react';
  2. function MyControlledInput({ }) {
  3.   const [ value, setValue ] = useState('');
  4.   const onChange = (event) => {
  5.     setValue(event.target.value);
  6.   }
  7.   
  8.   return (
  9.     <>
  10.         
    Input value: {value}
  11.         
  12.     
  13.   )
  14. }

打开示例(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(")。

创建事件处理程序,该事件处理程序在值更改时更新状态:

 
 
 
 
  1. const onChange = event => setValue(event.target.value);

3.为input字段分配状态值,并添加事件处理程序:。

3. state 作为真实的数组源

我们看一个更复杂的例子。页面中有一组员工姓名列表。我们需要添加一个 input字段,当用户在此字段中键入内容时,员工列表将按姓名进行过滤。

 
 
 
 
  1. function FilteredEmployeesList({ employees }) {
  2.  const [query, setQuery] = useState('');  
  3.  const onChange = event => setQuery(event.target.value);
  4.   const filteredEmployees = employees.filter(name => {
  5.     return name.toLowerCase().includes(query.toLowerCase());
  6.   });
  7.   return (
  8.     
  9.  

    Employees List

  10.  
  11.         type="text" 
  12.  value={query}        onChange={onChange}      />
  13.  
  14.  {filteredEmployees.map(name => 
    {name}
    )}
  15.  
  •  
  •   );
  • }
  • 打开演示(https://codesandbox.io/s/gracious-dawn-29qi6?file=/src/App.js),可以自行试试。

    对输入进行防抖

    在前面的实现中,只要在input中输入一个字符,就会立即过滤列表。这并不总是很方便,因为在输入查询时它会分散用户的注意力。

    我们通过debounce来改善用户体验:在最后一次更改后,以400毫秒的延迟过滤列表。

     
     
     
     
    1. import { useDebouncedValue } from './useDebouncedValue';
    2. function FilteredEmployeesList({ employees }) {
    3.   const [query, setQuery] = useState('');
    4.  const debouncedQuery = useDebouncedValue(query, 400);  
    5.   const onChange = event => setQuery(event.target.value);
    6.   const filteredEmployees = employees.filter(name => {
    7.  return name.toLowerCase().includes(debouncedQuery.toLowerCase());  });
    8.   return (
    9.     
    10.  

      Employees List

    11.  
    12.         type="text" 
    13.         value={query} 
    14.         onChange={onChange}
    15.       />
    16.  
    17.  {filteredEmployees.map(name => 
      {name}
      )}
    18.  
  •  
  •   );
  • }
  • 打开演示(https://codesandbox.io/s/affectionate-swartz-9yk2u?file=/src/App.js),然后在input中输放值进行查询。员工列表不会在你打字时进行过滤,而是在最近一次按下键400毫秒后进行过滤。

    下面是useDebouncedValue()的实现

     
     
     
     
    1. export function useDebouncedValue(value, wait) {
    2.   const [debouncedValue, setDebouncedValue] = useState(value);
    3.   useEffect(() => {
    4.     const id = setTimeout(() => setDebouncedValue(value), wait);
    5.     return () => clearTimeout(id);
    6.   }, [value]);
    7.   return debouncedValue;
    8. }

    受控组件是访问React中input字段的值的一种方便的技术。它不使用引用,而是作为访问input值的单一真实源。

    ~ 完,我们小智,我要去刷碗了,下期再见~

    作者:Shadeed 译者:前端小智 来源:dmitripavlutin

    原文:https://dmitripavlutin.com/controlled-inputs-using-react-hooks/

    本文转载自微信公众号「大迁世界」,可以通过以下二维码关注。转载本文请联系大迁世界公众号。

    分享标题:React受控组件,Hooks方式!
    网页网址:http://www.shufengxianlan.com/qtweb/news27/521327.html

    网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

    广告

    声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

    猜你还喜欢下面的内容

    全网营销推广知识

    同城分类信息