Giriş boşken düğme nasıl devre dışı bırakılır?

168

React'te yeniyim. Bir giriş alanı boş olduğunda bir düğmeyi devre dışı bırakmaya çalışıyorum. React'te bunun için en iyi yaklaşım nedir?

Aşağıdaki gibi bir şey yapıyorum:

<input ref="email"/>

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

Bu doğru mu?

Bu sadece dinamik özniteliğin kopyalanması değil, aynı zamanda verileri bir elemandan diğerine aktarmayı / kontrol etmeyi de merak ediyorum.

reactjs

— Stepan Suvorov
kaynak

3

ReactJS

— WiredPrairie'de

258

Girişin geçerli değerini durumda tutmanız (veya değerindeki değişiklikleri bir geri arama işlevi veya yana doğru veya bir üst öğeye kadar geçmeniz veya sonunda uygulamanızın durum yönetimi çözümü>) bileşeninizi prop olarak), böylece düğme için devre dışı bırakılan pervaneyi türetebilirsiniz.

Durum kullanma örneği:

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

Snippet'i genişlet

— Jonny Buchanan
kaynak

3

Harika, örnek çalışır ve her şey. Güzel tam örnek ve güzel interaktif demo, SO.

— dört43

1

Bu işe yaramaz, çünkü disabledsadece bir elemana iliştirilerek, elemenin devre dışı bırakılacağı anlamına gelir. Bu bir bool değil.

— Şuna

4

@ React için doğru değil. Bu etiketler HTML değil, JSX. Ve JSX'te, bir özniteliğe false atanırsa, HTML'ye dönüştürülürken tamamen kaldırılır. Mükemmel çalıştığını söyleyen hemen üstündeki yorumu görmezden geldin mi?

— Ben Baron

2

@BenBaron açıklama için teşekkürler. Nerede / nasıl kullandığımı hatırlamıyorum, ancak birkaç sorunum vardı. Başkalarının bu yöntemin insanların deneyimlerine dayanan doğru yöntem olduğunu bilmesi için yorumunuzu destekliyorum.

— Kayote

3

@Kayote Yorumun son kısmı ile biraz kaba geldiğim için teşekkürler ve üzgünüm. Gerçekten uzun bir gündü.

— Ben Baron

8

Sabitleri kullanmak, doğrulama için birden fazla alanın birleştirilmesine izin verir:

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>

Snippet'i genişlet

— Gi1ber7
kaynak

7

Kontrol etmenin başka bir yolu da işlevi satır içi yapmaktır, böylece koşul her renderde kontrol edilir (her sahne ve durum değişikliği)

const isDisabled = () => 
  // condition check

Bu çalışıyor:

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

ancak bu çalışmaz:

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

— Marc Sloth Eastman
kaynak

-1

basit, aşağıdakileri içeren Bileşeni genişleterek bir devlet tam sınıfı yaptığınızı varsayalım.

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
kaynak