Soy realmente nuevo en ReactJs y actualmente tengo problemas para crear un evento onClick, que tomará el valor href de sí mismo y lo pasará a una función llamada 'acción'.
La función de acción debería evitar el comportamiento predeterminado del navegador, realizar una solicitud GET a la URL pasada y mostrar un cuadro de diálogo de alerta que contiene la respuesta y el estado.
Sin embargo, estoy atascado tratando de llamar a mi función desde el evento onClick con el siguiente error:
No capturado (en promesa) ReferenceError: la acción no está definida
var Content = React.createClass({ getInitialState: function() { return { teams: [] } }, componentDidMount: function() { const makeRequest = () => axios.get("http://localhost:5000/api/teams").then(({ data }) => this.setState({ teams: data })); this.serverRequest = makeRequest(); this.poll = setInterval(() => { this.serverRequest = makeRequest(); }, 10000) }, componentWillUnmount: function() { this.serverRequest.abort(); clearInterval(this.poll) }, action: function(e) { e.preventDefault(); $.get(e.href, function(res, status) { alert("Response: " + res + "\nStatus: " + status); }); }, render: function() { const { teams } = this.state; return ( <div className="list-group"> { teams.map(function(team) { return ([ <a href={ "http://localhost:5000/api/teams?name=" + team.name} onClick={ action }>Click Me</a> ]); })} </div> ) } }); ReactDOM.render(<Content />, document.getElementById('content'));Pruebe this.action en lugar de action .
ACTUALIZAR
Encontré el problema. Se trata de alcance. No puedes acceder a this map interior.
render: function() { const { teams } = this.state; return ( <div className="list-group"> { teams.map((team) => { return ([ <a href={ "http://localhost:5000/api/teams?name=" + team.name} onClick={ this.action }>Click Me</a> ]); })} </div> ) }Es un problema vinculante, intente esto, funcionará:
render: function() { const { teams } = this.state; return ( <div className="list-group"> { teams.map((team,i)=>{ return <a key={i} href={ "http://localhost:5000/api/teams?name=" + team.name} onClick={ this.action }>Click Me</a> }) } </div> ) } Sugerencia : siempre que cree elementos html dinámicamente, siempre asigne la clave única a cada elemento, el valor de la key mantendrá sus componentes identificados de forma única.
De Facebook React Doc :
Las teclas ayudan a React a identificar qué elementos han cambiado, se agregaron o se eliminaron. Las claves se deben dar a los elementos dentro de la matriz para dar a los elementos una identidad estable.
En mi caso, olvidé requerir la función. Entonces, mi sugerencia es que verifique que la función se haya importado correctamente.