Bagaimana cara menonaktifkan tombol ketika input kosong?

168

Saya baru mengenal Bereaksi JavaScript. Saya mencoba menonaktifkan tombol ketika bidang input kosong. Apa pendekatan terbaik dalam Bereaksi untuk ini?

Saya melakukan sesuatu seperti berikut:

<input ref="email"/>

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

Apakah ini benar?

Ini bukan hanya duplikasi atribut dinamis, karena saya juga ingin tahu tentang mentransfer / memeriksa data dari satu elemen ke elemen lainnya.

reactjs Stepan Suvorov
sumber
3
kemungkinan duplikat atribut Dinamis di ReactJS
WiredPrairie

Jawaban:

257

Anda harus menjaga agar nilai input saat ini dalam status (atau meneruskan perubahan nilainya hingga ke orang tua melalui fungsi panggilan balik , atau menyamping , atau <solusi manajemen kondisi aplikasi Anda di sini> sehingga akhirnya masuk kembali ke dalam komponen Anda sebagai penyangga) sehingga Anda dapat memperoleh penyangga yang dinonaktifkan untuk tombol tersebut.

Contoh menggunakan status:

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

Jonny Buchanan
sumber
3
Luar biasa, contohnya berjalan dan semuanya. Contoh lengkap yang bagus dan demo interaktif yang bagus, SO.
four43
1
Ini tidak akan berhasil karena disabled, hanya dengan melekat pada suatu elemen, berarti elemen tersebut harus dinonaktifkan. Ini bukan omong kosong. Lihat ini: developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/…
Kayote
4
@Kayote itu tidak benar untuk Bereaksi. Tag-tag itu bukan HTML, itu JSX. Dan di JSX, jika atribut ditetapkan false, itu dihapus seluruhnya saat mengkonversi ke HTML. Apakah Anda langsung mengabaikan komentar di atas Anda yang mengatakan bahwa itu berjalan dengan sempurna?
Ben Baron
2
@BenBaron terima kasih atas klarifikasi. Saya tidak ingat di mana / bagaimana saya menggunakannya, namun saya punya beberapa masalah. Saya meningkatkan komentar Anda sehingga orang lain tahu bahwa metode ini adalah metode yang benar berdasarkan pengalaman orang.
Kayote
3
@ Kayote Terima kasih dan maaf jika saya sedikit kasar dengan bagian terakhir dari komentar. Hari yang sangat panjang.
Ben Baron
8

Menggunakan konstanta memungkinkan untuk menggabungkan beberapa bidang untuk verifikasi:

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

Gi1ber7
sumber
7

Cara lain untuk memeriksa adalah dengan menyelaraskan fungsi, sehingga kondisi akan diperiksa pada setiap render (setiap alat peraga dan perubahan status) 

const isDisabled = () => 
  // condition check

Ini bekerja: 

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

tetapi ini tidak akan berhasil:

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

sederhana, mari kita asumsikan Anda telah membuat kelas penuh negara dengan memperluas Komponen yang berisi berikut

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
sumber