Wie deaktiviere ich eine Schaltfläche, wenn eine Eingabe leer ist?

168

Ich bin neu bei React.js. Tut mir leid, wenn die Frage für Sie zu dumm klingt.

Ich versuche, eine Schaltfläche zu deaktivieren, wenn ein Eingabefeld leer ist. Was ist der beste Ansatz in React dafür?

Ich mache so etwas wie das Folgende:

<input ref="email"/>

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

Ist das richtig?

Es ist nicht nur eine Verdoppelung des dynamischen Attributs, sondern ich bin auch neugierig darauf, die Daten von einem Element auf ein anderes zu übertragen / zu überprüfen.

reactjs Stepan Suworow
quelle
3
mögliches Duplikat des dynamischen Attributs in ReactJS
WiredPrairie

Antworten:

257

Sie müssen den aktuellen Wert der Eingabe im Status halten (oder Änderungen ihres Werts über eine Rückruffunktion oder seitwärts oder <die Statusverwaltungslösung Ihrer App hier> an ein übergeordnetes Element übergeben , damit er schließlich wieder übergeben wird Ihre Komponente als Requisite), damit Sie die deaktivierte Requisite für die Schaltfläche ableiten können.

Beispiel mit state:

<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>
Erweitern Sie das Snippet

Jonny Buchanan
quelle
3
Super, das Beispiel läuft und alles. Schönes komplettes Beispiel und schöne interaktive Demo, SO.
Four43
1
Dies funktioniert nicht, da disableddurch einfaches Anhängen an ein Element das Element deaktiviert werden soll. Es ist kein Trottel. Siehe dies: developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/…
Kayote
4
@ Kayote, das gilt nicht für React. Diese Tags sind kein HTML, sondern JSX. Wenn in JSX ein Attribut false zugewiesen wird, wird es beim Konvertieren in HTML vollständig entfernt. Haben Sie den Kommentar direkt über Ihrem ignoriert, der besagt, dass er perfekt läuft?
Ben Baron
2
@ BenBaron danke für die Klarstellung. Ich erinnere mich nicht, wo / wie ich es benutzt habe, aber ich hatte ein paar Probleme. Ich stimme Ihrem Kommentar zu, damit andere wissen, dass diese Methode die richtige Methode ist, basierend auf den Erfahrungen der Menschen.
Kayote
3
@ Kayote Danke und Entschuldigung, wenn ich mit dem letzten Teil des Kommentars etwas unhöflich davongekommen bin. Es war ein sehr langer Tag.
Ben Baron
8

Durch die Verwendung von Konstanten können mehrere Felder zur Überprüfung kombiniert werden:

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>
Erweitern Sie das Snippet

Gi1ber7
quelle
7

Eine andere Möglichkeit zur Überprüfung besteht darin, die Funktion so zu integrieren, dass die Bedingung bei jedem Rendern (bei jeder Requisite und jeder Statusänderung) überprüft wird. 

const isDisabled = () => 
  // condition check

Das funktioniert: 

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

aber das wird nicht funktionieren:

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

Nehmen wir einfach an, Sie haben eine vollständige Statusklasse erstellt, indem Sie die Komponente erweitern, die Folgendes enthält

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
quelle