当输入为空时如何禁用按钮？

小能豆

当输入为空时如何禁用按钮？

javascript

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

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

<input ref="email"/>

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

它是否正确？

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

阅读 64

2024-06-03

共1个答案

小能豆

您需要保持输入的当前值处于状态（或通过回调函数、侧面或<您应用的状态管理解决方案>将其值的变化传递给父级，以便最终将其作为道具传回您的组件），这样您就可以派生出按钮的禁用道具。

使用状态的示例：

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

2024-06-03