Actualmente estoy trabajando en un proyecto usando webpack y babel para construir un proyecto. Intenté tantas cosas como se me ocurren, pero de alguna manera la función onSubmit o onClick no funciona sin importar cómo enlace esas funciones. Aquí está el fragmento de código del código. ¿Alguien puede pensar en alguna posible razón?
Aquí está el código. No puedo (útilmente) convertirlo en un Fragmento de pila porque no permiten envíos de formularios.
export default class CommentForm extends React.Component { constructor(props) { super(props); console.log("constructor"); } onSubmit(e) { e.preventDefault(); console.log("you clicked") // 1. Take data from from form let commentData = { // commentName: this.refs.name.value, commentBody: this.refs.content.value } // 2. Pass data back to App this.props.addComment(commentData); // 3. Reset the form this.refs.commentForm.reset(); } render() { return ( <div className="commentForm"> <form name="comment" id="comment" onSubmit={this.onSubmit.bind(this)}> <textarea className="commentText" ref="content" rows="10" placeholder="Comment"></textarea> <button id="submit" type="submit">Add Value</button> </form> </div> ); } }Esto me parece completamente válido. Tenga en cuenta, sin embargo, que commentForm no existe como ref.
Aparte de eso, lo probé localmente y funciona. Verifique las versiones de React y el paquete web que está utilizando para asegurarse de que toda la capacidad de es6 esté presente.
NOTA: El fragmento ejecutable no funcionará porque el envío del formulario está bloqueado porque su marco está aislado.
Aquí hay un violín que funciona, registrando los valores en la consola. No es necesario utilizar referencias y el uso de referencias debe limitarse en la medida de lo posible.
En lugar de referencias, asigne un nombre a los elementos del formulario y use
e.target.content.valuepara acceder a los valores