React.js: Disattiva pulsante quando l'input è vuoto

Question

Sono nuovo di React.js, scusa se la domanda sembra troppo stupida per te.

Sto provando a disabilitare un pulsante quando un campo di input è vuoto. Qual è l'approccio beest in React per questo?

sto facendo qualcosa di simile al seguente:

<input ref="email"/> 

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

È corretto?

Non è solo la duplicazione dell'attributo dinamico, perché sono anche curioso di trasferire/controllare i dati da un elemento a un altro.

Answer 1

Avrete bisogno di mantenere il valore corrente dell'ingresso in stato (o passare variazioni nel suo valore up to a parent via a callback function, o sideways, o < soluzione di gestione dello stato della vostra applicazione qui > tale che alla fine viene passato nuovamente dentro la vostra componente come supporto) in modo da poter ricavare il puntello disattivato per il pulsante.

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