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

小编典典

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

all

我是反应新手。当输入字段为空时，我正在尝试禁用按钮。React 中最好的方法是什么？

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

<input ref="email"/>

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

这个对吗？

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

阅读 54

2022-08-03

共1个答案

小编典典

您需要将输入的当前值保持在 state 中（或通过回调函数或sideways或 _< your app’s
state management solution
here>_将其值的更改传递给父级，以便最终将其传递回您的组件作为道具），因此您可以为按钮派生禁用的道具。

使用状态的示例：

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

2022-08-03