¿Cómo obtiene la función anidada dentro handleClick2 el objeto e , cuando solo estoy pasando el objeto de input ? ¿Cómo está disponible el objeto e para el alcance de la función anidada? ¿Tiene esto algo que ver con el entorno léxico ?
handleClick2 = (input) => (e) => { this.setState({ [input]: e.target.value }); }; render() { return ( <button onClick={this.handleClick2('item')}> Confirm </button> );} ¿Y cómo genero parámetros válidos para la función handleClick2 como valor de retorno de otra función? Por ejemplo:
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> );}Es gracioso, lo haces funcionar, te preguntas por qué, ¿verdad?
Bien, hagámoslo lentamente.
handleClick = input => { return e => { this.setState(...} } } La primera invocación handleClick(input) solo devuelve una función. Esta función acepta e como argumento de entrada. Y según la interfaz del button , onClick es un controlador de eventos que es e => {} . Por lo tanto, funciona.
No está claro qué debe hacer su código, ya que ha dejado mucho fuera.
Idealmente, debería actualizar el estado cuando cambia la entrada y luego hacer algo con ese estado cuando se hace clic en el botón.
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>O la forma más corta del componente funcional:
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>Cuando se hace clic en <button> , llama a cualquier función que haya pasado en el argumento onClick con el Event creado como argumento. En este caso la función es esta lambda:
(e) => { this.setState({ input]: e.target.value }); };