Creé un formulario y dentro quiero 2 formas de enviar:
Como agregué la segunda forma, el campo de entrada no funciona. Puedo escribir algo y presionar enter pero necesariamente llamará a la función enlazar al botón onClick of record-voice, ¿por qué?
Aquí está el código del componente principal.
<form onSubmit={ handleSubmit } style={Style.myform}> <Dictaphone values={values} write_speech={this.write_speech} perso={this.state.perso} question={this.state.question} /> <div className={Style.mydiv}> <input className={Style.n_0} id="question" type="text" onChange={handleChange} value={values.question} disabled={isSubmitting} placeholder="Type here"/> </div> </form>Entonces, aquí puede ver el primer método en la entrada y el segundo en el componente Dictáfono, llama a la siguiente función:
write_speech = (text, values) => { console.log("write_speech"); console.log(values) this.setState({question: document.getElementById("montexte").getAttribute("montexte")}, function () { values['question'] = this.state.question }); }Y el contenido de Dicatphone:
return ( <div> <button onClick={SpeechRecognition.startListening} type="button"> Start</button> <button onClick={(transcript) => props.write_speech(transcript, props.values)}>Stop</button> <button onClick={() => alert("toto")}>Reset</button> <p id="montexte" type="text" className={Style.welcome_text} hidden={true} montexte={transcript} /> </div> );Así que puedo hacer clic en Iniciar para grabar y Detener para llamar a write_speech, pero cuando solo uso el componente principal y completo la entrada, necesariamente también llama a write_speech. Pero no quiero eso.
Hice una prueba simple y curiosamente no llama a la function () => alert("toto")
Lo que ya probé: los 3 métodos descritos en esta publicación, pero me persistió el mismo problema https://stackoverflow.com/a/34226188/10971146
gracias por haber leído
Los botones de parada y reinicio deben tener type="button" o, de lo contrario, el primero de los dos se comportará como un botón de envío. Si necesita un botón de envío de formulario, use un botón de envío explícito de type="submit" .
De forma predeterminada , el tipo para el elemento de botón HTML es submit . Cuando escribe texto en una entrada de formulario y presiona Entrar, eso actúa como un evento de envío. Por lo tanto, el formulario llama al controlador de clics para el primer botón que ve.
Aquí hay un JSFiddle que muestra lo que sucede si tiene un formulario con un botón de envío explícito colocado después de un botón sin un atributo de type explícito: se llama al controlador de clic del botón: https://jsfiddle.net/r128cfyn/7/ . Aunque el botón de envío del formulario es explícito, el primer botón también es un botón de envío porque no es type="button" .
Intenta usar
onclick="event.preventDefault()";
para evitar el comportamiento predeterminado de los botones.