React.js: Wyłącz przycisk, gdy wejście jest puste

Question

Jestem nowy w React.js, przepraszam, jeśli pytanie brzmi zbyt głupio dla ciebie.

Próbuję wyłączyć przycisk, gdy pole wejściowe jest puste. Jakie jest najlepsze podejście w React?

robię coś jak następuje:

<input ref="email"/> 

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

jest to prawidłowe?

Nie jest to tylko powielenie atrybutu dynamicznego, ponieważ jestem również ciekawy transferu/sprawdzania danych z jednego elementu do drugiego.

Answer 1

Musisz zachować bieżącą wartość wejścia w stanie (lub przechodzą zmiany jego wartości up to a parent via a callback function lub sideways lub < rozwiązanie do zarządzania stan Twojej aplikacji tutaj > taki sposób, że ostatecznie zostanie przeniesiony z powrotem do komponent jako rekwizyt), dzięki czemu można uzyskać niezdefiniowaną podpórkę dla przycisku.

Przykład wykorzystania Stan:

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