如何理解React受控组件Hooks方式

这篇文章主要介绍“如何理解React受控组件Hooks方式”，在日常操作中，相信很多人在如何理解React受控组件Hooks方式问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”如何理解React受控组件Hooks方式”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

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/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(")。

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

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

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

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>  <h3>Employees List</h3>  <input          type="text"   value={query}        onChange={onChange}      />  <div className="list">  {filteredEmployees.map(name => <div>{name}</div>)}  </div>  </div>   ); }

打开演示(https://codesandbox.io/s/gracious-dawn-29qi6?file=/src/App.js)，可以自行试试。

对输入进行防抖

在前面的实现中，只要在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>  <h3>Employees List</h3>  <input          type="text"          value={query}          onChange={onChange}       />  <div className="list">  {filteredEmployees.map(name => <div>{name}</div>)}  </div>  </div>   ); }

打开演示(https://codesandbox.io/s/affectionate-swartz-9yk2u?file=/src/App.js)，然后在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值的单一真实源。

到此，关于“如何理解React受控组件Hooks方式”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！