How does the nested function inside handleClick2 get the e object, when i am only passing the input object ?
Like how is the object e available for the scope of the nested function ? Does this have anything to do with Lexical Environment ?
handleClick2 = (input) => (e) => {
this.setState({
[input]: e.target.value
});
};
render() {
return (
<button onClick={this.handleClick2('item')}>
Confirm
</button>
);}
And how do i generate valid parameters for the handleClick2 function as a return value from another function ?
For example:
handleClick2 = (input) => (e) => {
this.setState({
[input]: e.target.value
});
};
handleClick1 = input => e => {
// Mutate input and e
return handleClick2 with mutated input and e as parameters.
}
render() {
return (
<button onClick={this.handleClick1('item')}>
Confirm
</button>
);}
Funny, you get it working, you are wondering why right ?
Ok, let's do it slowly.
handleClick = input => {
return e => {
this.setState(...}
}
}
The first invoke handleClick(input) is only returning a function. This function accepts e as input argument. And based on button interface, onClick is an event handler which is e => {}. Therefore it works.
It's a little unclear what your code is meant to be doing since you've left a lot out.
Ideally you should be updating state when the input changes, and then doing something with that state when the button is clicked.
const { Component } = React;
class Example extends Component {
constructor() {
super();
this.state = { input: '' };
}
handleInput = (e) => {
this.setState({ input: e.target.value });
}
handleClick = () => {
console.log(this.state.input);
}
render() {
return (
<div>
<input onChange={this.handleInput} value={this.state.input} />
<button onClick={this.handleClick}>Click me</button>
</div>
);
}
};
// Render it
ReactDOM.render(
<Example />,
document.getElementById("react")
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>Or the shorter functional component way:
const { useState } = React;
function Example() {
const [ input, setInput ] = useState('');
function handleInput(e) {
setInput(e.target.value);
}
function handleClick() {
console.log(input);
}
return (
<div>
<input onChange={handleInput} value={input} />
<button onClick={handleClick}>Click me</button>
</div>
);
};
// Render it
ReactDOM.render(
<Example />,
document.getElementById("react")
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>When the <button> gets clicked it calls whatever function that you have passed in the onClick argument with the created Event as the argument. In this case the function is this lambda:
(e) => {
this.setState({
input]: e.target.value
});
};