Estoy aprendiendo a reaccionar y estoy súper confundido por qué este controlador de eventos no está definido.
const Login = () => { handleSubmit = (e) => { console.log("Clicked"); e.preventDefault(); }; return ( <form onSubmit={this.handleSubmit}> <input type="email" /> <input type="password" /> </form> ); }; me sale handleSubmit is not defined y no tengo idea de por qué sucede esto?
creo que ha olvidado const y no necesita esta palabra clave porque está utilizando el componente de función
const Login = () => { const handleSubmit = (e) => { console.log("Clicked"); e.preventDefault(); }; return ( <form onSubmit={handleSubmit}> <input type="email" /> <input type="password" /> </form> ); };Está mezclando las dos formas diferentes de declarar un componente React.
Elige entre:
render y necesita this para hacer referencia a los métodos de clase. const { Component } = React; class Example extends Component { handleSubmit = (e) => { e.preventDefault(); console.log("Clicked"); }; render() { return ( <form onSubmit={this.handleSubmit}> <input type="email" /> <input type="password" /> <button type="submit">Submit</button> </form> ); } } ReactDOM.render( <Example />, document.getElementById('react') ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>render y no requiere que haga referencia a this para llamar a las funciones del controlador. Además, los componentes de función le permiten acceder a los ganchos de React . const { Component } = React; function Example() { function handleSubmit(e) { e.preventDefault(); console.log("Clicked"); }; return ( <form onSubmit={handleSubmit}> <input type="email" /> <input type="password" /> <button type="submit">Submit</button> </form> ); } ReactDOM.render( <Example />, document.getElementById('react') ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>