web-dev-qa-db-fra.com

React.js: bouton Désactiver 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 la meilleure approche dans React pour cela?

Je fais quelque chose comme ce qui suit:

<input ref="email"/>

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

Est-ce correct?

Il ne s'agit pas simplement d'une duplication d'attribut dynamique, car je suis également curieux de pouvoir transférer/vérifier les données d'un élément à un autre.

reactjsreact-jsx
117
Stepan Suvorov

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 côté ou <de la solution de gestion d'état de votre application ici> de telle sorte qu'il soit finalement renvoyé dans votre composant sous forme d'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>

188
Jonny Buchanan

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>

3
Gi1ber7

Une autre façon de vérifier consiste à intégrer la fonction afin que la condition soit vérifiée à chaque rendu (chaque accessoire et chaque 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>
1
Marc Sloth Eastman