“This is the 21st day of my participation in the Gwen Challenge in November. See details of the event: The Last Gwen Challenge 2021”.

Let’s start with two concepts

What is a controlled component?

I don't really understand it either. It feels similar to Vue's bidirectional binding.Copy the code

Check out the React website for an explanation

What is the corrification of a function

I don't remember where I copied it. I'm going to return the form of the function through the function call, and then I'm going to take the argument multiple times and then I'm going to process the code in a uniform way. Function sum(x) {return function(y) {return x+y}} function sum(x) {return function(y) {return x+y}} function sum(x) {return x+y}} Maybe someone would say, WELL, I can just upload it all at once. It can, but sometimes it can't.Copy the code

Let’s start with a very common interview question:

add(1)(2)(3) = 6;
add(1, 2, 3)(4) = 10;
add(1)(2)(3)(4)(5) = 15;
Copy the code

Think about how to do that? It’s just an application of the function Coriolization, and I first learned about it from the interview questions.

Now let’s talk about how a controlled component in React uses function cremation

class Input extends React.Component { state = { userName: '', password: } saveData = (value) => {console.log (value)} render() {return (<div> <input type="text" onChange = { this.saveData('userName') } /> <input type="password" onChange = { this.saveData('password') } /> </div> ) } } ReactDOM.render( <Input />, document.getElementById('root') );Copy the code

JS code as above.

In fact, you can do it without using the function Corrification, but in order to improve your memory of the function Corrification…

As you can see from the JS code, there are two input fields, onChange is bound to the same event saveData (‘ userName/password ‘)

<input type="text" onChange = { this.saveData('userName') } />
Copy the code

Can you guess if this input works?

It’s definitely not going to work,

Because this is equivalent to assigning the value returned by this.saveData(‘userName’) to the onChange event and calling the bound callback when the onChangr event is triggered, This.savedata (‘userName’) returns undefined. So naturally it doesn’t work.

So let’s just let saveData return a function.

But here’s the thing,

Where is the event argument to the callback function?

Is in a saveData (type, event)?

Or in the return function of saveData?

It’s in the return function of saveData.

Why is that?

Because we are the return function of saveData as the callback function of onChange. So e is also going to be the argument.