reactjs – React.js:当输入为空时禁用按钮

前端之家收集整理的这篇文章主要介绍了reactjs – React.js:当输入为空时禁用按钮前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我是React.js的新手,对不起,如果你的问题听起来太蠢了。

我试图在输入字段为空时禁用按钮。 React中的最佳方法是什么?

我正在做类似下面的事情:

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

它是否正确?

它不仅仅是动态属性的重复,因为我也很好奇从一个元素到另一个元素传输/检查数据。

您需要将输入的当前值保持在状态(或将值 up to a parent via a callback function,或 sideways或<您的应用程序的状态管理解决方案在这里>中的更改,以便最终作为道具传递回您的组件)所以你可以导出禁用道具的按钮。

使用状态示例:

  1. <Meta charset="UTF-8">
  2. <script src="https://fb.me/react-0.13.3.js"></script>
  3. <script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
  4. <div id="app"></div>
  5. <script type="text/jsx;harmony=true">void function() { "use strict";
  6.  
  7. var App = React.createClass({
  8. getInitialState() {
  9. return {email: ''}
  10. },handleChange(e) {
  11. this.setState({email: e.target.value})
  12. },render() {
  13. return <div>
  14. <input name="email" value={this.state.email} onChange={this.handleChange}/>
  15. <button type="button" disabled={!this.state.email}>Button</button>
  16. </div>
  17. }
  18. })
  19.  
  20. React.render(<App/>,document.getElementById('app'))
  21.  
  22. }()</script>

猜你在找的React相关文章