React.js: Désactive le bouton lorsque l’entrée est vide
Je suis nouveau sur React.js, désolé si la question semble trop stupide pour vous.
J’essaie de désactiver un bouton lorsqu’un champ de saisie est vide. Quelle est l’approche la plus efficace dans React pour cela?
Je fais quelque chose comme ceci:
Est-ce correct?
Il ne s’agit pas simplement de dupliquer un atsortingbut dynamic, car je suis également curieux de savoir comment transférer / vérifier les données d’un élément à un autre.
Vous devez conserver la valeur actuelle de l’entrée dans l’état (ou transmettre les modifications de sa valeur à un parent via une fonction de rappel , ou de manière latérale , ou la solution de gestion d’état de votre application ici pour qu’elle soit transmise à votre composant en tant que prop) afin que vous puissiez dériver le prop désactivé pour le bouton.
Exemple utilisant l’état:
L’utilisation de constantes permet de combiner plusieurs champs pour la vérification:
class LoginFrm extends React.Component { constructor() { super(); this.state = { email: '', password: '', }; } handleEmailChange = (evt) => { this.setState({ email: evt.target.value }); } handlePasswordChange = (evt) => { this.setState({ password: evt.target.value }); } handleSubmit = () => { const { email, password } = this.state; alert(`Welcome ${email} password: ${password}`); } render() { const { email, password } = this.state; const enabled = email.length > 0 && password.length > 0; return ( ) } } ReactDOM.render(