1 year ago
#262224
solene
React : Enter key click on the unexpected button
First of all, I am a beginner in React and React Native, and I am taking on a project. So, sorry if you don't have al the details, ask me what you need if you have an idea of the issue. And I am not fluent English, so I apologize for that. The code is a form, containing an input, and 2 butons. The first one to add a file, the second one for submitting the text. When I test it on my laptop, android mobile or even on ios simulator, if I press enter key, everything works fine. But when my CTO tries it on his iphone 12, the enter key clicks on the addFile button, in the web app or in the web viw of the react native mobile app. Does somebody know where does it comes from ?
const handleSubmit = (e) => {
if (messageValue === "") {
e.preventDefault();
} else {
e.preventDefault();
// On post le message
postMessage();
// On reset l'input
setMessageValue("");
}
};
const handleChange = (e) => {
setMessageValue(e.target.value, cas.id);
};
return (
<ContainerReponse>
<ChatFormInput
onSubmit={handleSubmit}
type="text"
label="Envoyer votre message"
value={messageValue.message}
onChange={handleChange}
valueToActive={messageValue}
required={true}
>
<SendButton disabled={!messageValue ? true : false}/>
</ChatFormInput>
</ContainerReponse>
And this is the button element of the <SendButton/>
component :
<button disabled={disabled} type="submit" value="Envoyer" className="sendButton orange send-message">
Envoyer
</button>
Thank you for you kindness
reactjs
forms
button
react-redux
enter
0 Answers
Your Answer