输入为空时如何禁用按钮？
Posted
技术标签:
【中文标题】输入为空时如何禁用按钮？【英文标题】：How to disable a button when an input is empty? 【发布时间】：2015-07-23 03:28:11 【问题描述】：我是 React 新手。当输入字段为空时，我正在尝试禁用按钮。 React 中最好的方法是什么？
我正在做类似以下的事情：
<input ref="email"/>
<button disabled=!this.refs.email>Let me in</button>
这对吗？
这不仅仅是动态属性的重复，因为我也很好奇将数据从一个元素传输/检查到另一个元素。
【问题讨论】：
Dynamic attribute in ReactJS 的可能重复项 【参考方案1】：const Example = () =>
const [value, setValue] = React.useState("");
function handleChange(e)
setValue(e.target.value);
return (
<input ref="email" value=value onChange=handleChange/>
<button disabled=!value>Let me in</button>
);
export default Example;
【讨论】：
虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。【参考方案2】：<button disabled=false>button WORKS</button>
<button disabled=true>button DOES NOT work</button>
现在只需使用 useState 或任何其他条件将 true/false 传递给按钮，假设您正在使用 React。
【讨论】：
【参考方案3】：另一种检查方法是内联函数，以便在每次渲染时检查条件（每个道具和状态更改）
const isDisabled = () =>
// condition check
这行得通：
<button
type="button"
disabled=this.isDisabled()
>
Let Me In
</button>
但这不起作用：
<button
type="button"
disabled=this.isDisabled
>
Let Me In
</button>
【讨论】：
【参考方案4】：它很简单，让我们假设您通过扩展包含以下内容的组件创建了一个完整的状态类
class DisableButton extends Components
constructor()
super();
// now set the initial state of button enable and disable to be false
this.state = isEnable: false
// this function checks the length and make button to be enable by updating the state
handleButtonEnable(event)
const value = this.target.value;
if(value.length > 0 )
// set the state of isEnable to be true to make the button to be enable
this.setState(isEnable : true)
// in render you having button and input
render()
return (
<div>
<input
placeholder="ANY_PLACEHOLDER"
onChange=this.handleChangePassword
/>
<button
onClick =this.someFunction
disabled = this.state.isEnable
/>
<div/>
)
【讨论】：
【参考方案5】：使用常量可以组合多个字段进行验证：
class LoginFrm extends React.Component
constructor()
super();
this.state =
email: '',
password: '',
;
handleEmailChange = (evt) =>
this.setState( email: evt.target.value );
handlePasswordChange = (evt) =>
this.setState( password: evt.target.value );
handleSubmit = () =>
const email, password = this.state;
alert(`Welcome $email password: $password`);
render()
const email, password = this.state;
const enabled =
email.length > 0 &&
password.length > 0;
return (
<form onSubmit=this.handleSubmit>
<input
type="text"
placeholder="Email"
value=this.state.email
onChange=this.handleEmailChange
/>
<input
type="password"
placeholder="Password"
value=this.state.password
onChange=this.handlePasswordChange
/>
<button disabled=!enabled>Login</button>
</form>
)
ReactDOM.render(<LoginFrm />, document.body);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<body>
</body>【讨论】：
【参考方案6】：您需要将输入的当前值保持在状态（或传递其值的更改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>【讨论】：
太棒了，示例运行和一切。不错的完整示例和不错的交互式演示，所以。 这行不通，因为disabled 仅仅被附加到一个元素上，意味着该元素将被禁用。它不是布尔值。看到这个：developer.mozilla.org/en-US/docs/Web/API/htmlSelectElement/…
@Kayote 对于 React 来说不是这样。这些标签不是 HTML，它们是 JSX。而在 JSX 中，如果一个属性被赋值为 false，那么在转换为 HTML 时它会被完全删除。您是否只是忽略了您上面的评论说它运行完美？
@BenBaron 感谢您的澄清。我不记得我在哪里/如何使用它，但是，我遇到了一些问题。我赞成您的评论，以便其他人知道这种方法是基于人们经验的正确方法。
@Kayote 谢谢和抱歉，如果我对评论的最后部分有点粗鲁的话。这真是漫长的一天。以上是关于输入为空时如何禁用按钮？的主要内容，如果未能解决你的问题，请参考以下文章