Comment désactiver un bouton lorsqu'une entrée est vide?

168

Je suis nouveau sur React. J'essaye de désactiver un bouton lorsqu'un champ de saisie est vide. Quelle est la meilleure approche dans React pour cela?

Je fais quelque chose comme ceci:

<input ref="email"/>

<button disabled={!this.refs.email}>Let me in</button>

Est-ce correct?

Ce n'est pas seulement la duplication de l'attribut dynamique, car je suis également curieux de transférer / vérifier les données d'un élément à un autre.

reactjs Stepan Suvorov
la source
3
duplication possible de l' attribut dynamique dans ReactJS
WiredPrairie

Réponses:

258

Vous devrez 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 sur le côté , ou <la solution de gestion de l'état de votre application ici>> de sorte qu'elle soit éventuellement renvoyée dans votre composant comme accessoire) afin que vous puissiez dériver l'accessoire désactivé pour le bouton.

Exemple d'utilisation de l'état:

<meta charset="UTF-8">
<script src="https://fb.me/react-0.13.3.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
<div id="app"></div>
<script type="text/jsx;harmony=true">void function() { "use strict";

var App = React.createClass({
  getInitialState() {
    return {email: ''}
  },
  handleChange(e) {
    this.setState({email: e.target.value})
  },
  render() {
    return <div>
      <input name="email" value={this.state.email} onChange={this.handleChange}/>
      <button type="button" disabled={!this.state.email}>Button</button>
    </div>
  }
})

React.render(<App/>, document.getElementById('app'))

}()</script>
Développer l'extrait

Jonny Buchanan
la source
3
Génial, l'exemple fonctionne et tout. Bel exemple complet et belle démo interactive, SO.
four43
1
Cela ne fonctionnera pas car disabled, en étant simplement attaché à un élément, cela signifie que l'élément doit être désactivé. Ce n'est pas un idiot. Voir ceci: developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/…
Kayote
4
@Kayote ce n'est pas vrai pour React. Ces balises ne sont pas HTML, elles sont JSX. Et dans JSX, si un attribut est attribué à false, il est entièrement supprimé lors de la conversion en HTML. Avez-vous simplement ignoré le commentaire immédiatement au-dessus du vôtre qui dit qu'il fonctionne parfaitement?
Ben Baron
2
@BenBaron merci pour la clarification. Je ne me souviens pas où / comment je l'ai utilisé, cependant, j'ai eu quelques problèmes. Je vote votre commentaire pour que les autres sachent que cette méthode est la bonne méthode basée sur l'expérience des gens.
Kayote
3
@Kayote Merci et désolé si je suis sorti un peu impoli avec la dernière partie du commentaire. C'était une très longue journée.
Ben Baron
8

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 (
      <form onSubmit={this.handleSubmit}>
        <input
          type="text"
          placeholder="Email"
          value={this.state.email}
          onChange={this.handleEmailChange}
        />
        
        <input
          type="password"
          placeholder="Password"
          value={this.state.password}
          onChange={this.handlePasswordChange}
        />
        <button disabled={!enabled}>Login</button>
      </form>
    )
  }
}

ReactDOM.render(<LoginFrm />, document.body);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<body>


</body>
Développer l'extrait

Gi1ber7
la source
7

Une autre façon de vérifier consiste à intégrer la fonction, de sorte que la condition soit vérifiée à chaque rendu (chaque accessoire et changement d'état) 

const isDisabled = () => 
  // condition check

Cela marche: 

<button
  type="button"
  disabled={this.isDisabled()}
>
  Let Me In
</button>

mais cela ne fonctionnera pas:

<button
   type="button"
   disabled={this.isDisabled}
>
  Let Me In
</button>
Marc Sloth Eastman
la source
-1

c'est simple, supposons que vous avez créé une classe complète d'état en étendant le composant qui contient les éléments suivants

class DisableButton extends Components 
   {

      constructor()
       {
         super();
         // now set the initial state of button enable and disable to be false
          this.state = {isEnable: false }
       }

  // this function checks the length and make button to be enable by updating the state
     handleButtonEnable(event)
       {
         const value = this.target.value;
         if(value.length > 0 )
        {
          // set the state of isEnable to be true to make the button to be enable
          this.setState({isEnable : true})
        }


       }

      // in render you having button and input 
     render() 
       {
          return (
             <div>
                <input
                   placeholder={"ANY_PLACEHOLDER"}
                   onChange={this.handleChangePassword}

                  />

               <button 
               onClick ={this.someFunction}
               disabled = {this.state.isEnable} 
              /> 

             <div/>
            )

       }

   }
keerthi c
la source