React.js：input为空时禁用button

我是React.js的新手，对不起，如果这个问题听起来太愚蠢了。

我试图禁用一个input字段为空时的button。 React对此有什么好处？

我正在做如下的事情：

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

它是否正确？

这不仅仅是dynamic属性的重复，因为我也对从一个元素到另一个元素的数据传输/检查感到好奇。

Answer 1

您需要将input的当前值保持在状态（或者通过callback函数或者横向或者<您的应用程序的状态pipe理解决scheme>将值的更改传递给父项） ，以便最终返回到你的组件作为道具），所以你可以派生出这个button的残疾人道具。

使用状态的示例：

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