hola, soy un novato en reaccionar, estoy enfrentando un problema en el componente basado en clases que se indica a continuación, es mi componente al que estoy llamando dentro de otro componente de reaccionar, solo quiero llamar a la función temporal cuando se activa onClick, pero en mi caso no funciona, por favor Déjame saber dónde estoy haciendo mal?
import react from 'react' import '../../../css/classBased/editor/textFieldForEditor.css' import addTextField from './leftTrayIconsForEditor' class TextField extends react.Component { temp() { console.log('hi there') } render(){ return ( <div className='textfield_parent_container'> <div> <center> <div> <button onClick={()=> {this.temp()}}> <i className="material-icons md-18">article</i> </button> <button> <i className="material-icons md-18">image</i> </button> <button> <i className="material-icons md-18">movie</i> </button> </div> </center> </div> <textarea className='text' id={`textfield${this.props.widgetNumber}`}></textarea> <div className='utilitytrayouter'> <center> <div className='temp'> <button> <i className="material-icons md-18">article</i> </button> <button> <i className="material-icons md-18">image</i> </button> <button> <i className="material-icons md-18">movie</i> </button> </div> </center> </div> </div> ) } } export default TextField;Realmente funciona y hacer clic en el botón del primer article realmente llama a console.log('hi there') . Probar el mensaje de error podría ser útil.
Pero dado que está utilizando componentes de Class , lo más probable es que se enfrente al "problema" de manejo de eventos y lo que necesita es bind su método temp al componente TextField . La forma más fácil (pero puede requerir un complemento de Babel dependiendo de su configuración) es usando la función de flecha:
temp = () => {console.log('hi there')}