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

发布时间：2020-12-15 06:51:09 所属栏目：百科来源：网络整理

导读：我是React.js的新手，对不起，如果你的问题听起来太蠢了。我试图在输入字段为空时禁用按钮。 React中的最佳方法是什么？我正在做类似下面的事情： input ref="email"/button disabled={!this.refs.email}Let me in/button 它是否正确？它不仅仅是动态属性

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

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

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

<input ref="email"/>

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

它是否正确？

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

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

使用状态示例：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!