gpt4 book ai didi

reactjs - 当输入为空时如何禁用按钮?

转载 作者:行者123 更新时间:2023-12-03 12:52:39 24 4
gpt4 key购买 nike

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

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

<input ref="email"/>

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

这是正确的吗?

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

最佳答案

您需要将输入的当前值保留在状态中(或传递其值 up to a parent via a callback functionsideways<您应用的状态管理解决方案> 的更改,例如它最终会作为 prop 传递回您的组件),以便您可以派生按钮的禁用 prop。

使用状态的示例:

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

关于reactjs - 当输入为空时如何禁用按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30187781/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com