Shulou(Shulou.com)06/03 Report--

This article mainly introduces "how to understand the Hooks mode of React controlled components". In daily operation, I believe many people have doubts about how to understand the Hooks mode of React controlled components. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "how to understand the Hooks mode of React controlled components"! Next, please follow the editor to study!

1. Controlled component

Suppose we have a simple text field and want to access its value:

Import {useState} from 'react'; function MyControlledInput ({}) {const [value, setValue] = useState (''); const onChange = (event) = > {setValue (event.target.value);} return (Input value: {value})}

Open the example (https://codesandbox.io/s/controlled-component-uwf8n)) and enter it in the input box. You can see that the value variable contains the value in the input field, and it updates each time you enter a new value.

The input field is controlled because React sets its value from the state. When the user enters something in input, the onChange handler updates the status with the input value accessed from the event object event.target.value.

The value variable represents the value actually entered by the user. Each time you need to access the value entered by the user in the input field, you only need to read the value status variable.

The controlled component method can help us access values of any input type: regular text input, textarea, select, and so on.

two。 Of the three steps in the controlled component

Setting up a controlled component requires three steps:

Defines the state in which the input value is saved: const [value, setValue] = useState (").

Create an event handler that updates the status when the value changes:

Const onChange = event = > setValue (event.target.value)

3. Assign a status value to the input field and add an event handler:.

3. State as the real array source

Let's look at a more complex example. There is a list of employee names on the page. We need to add an input field in which the list of employees is filtered by name when the user types in this field.

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 (EmployeesList {filteredEmployees.map (name = > {name})});}

Open the demo (https://codesandbox.io/s/gracious-dawn-29qi6?file=/src/App.js)) and try it yourself.

Anti-shake the input

In the previous implementation, the list was filtered immediately as soon as a character was entered in input. This is not always convenient because it distracts the user when entering a query.

We use debounce to improve the user experience: filtering the list with a delay of 400ms after the last change.

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 (EmployeesList {filteredEmployees.map (name = > {name})});}

Open the demo (https://codesandbox.io/s/affectionate-swartz-9yk2u?file=/src/App.js)) and enter the values in input for query. The employee list is not filtered when you type, but 400 milliseconds after the last key is pressed.

The following is the implementation of useDebouncedValue ()

Export function useDebouncedValue (value, wait) {const [debouncedValue, setDebouncedValue] = useState (value); useEffect () = > {const id = setTimeout (()) = > setDebouncedValue (value), wait); return () = > clearTimeout (id);}, [value]); return debouncedValue;}

A controlled component is a convenient technique for accessing the value of the input field in React. Instead of using references, it serves as a single real source for accessing input values.

At this point, the study on "how to understand the Hooks way of React controlled components" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.