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
source

3

duplication possible de l' attribut dynamique dans ReactJS

— WiredPrairie

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
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
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
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
source