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

我是新来的。我试图禁用一个按钮时，一个输入字段是空的。应对这种情况的最佳方法是什么？

我正在做下面这样的事情:

<input ref="email"/>


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

是这样吗？

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

300257 次浏览
小开
最佳答案

您需要将输入的当前值保持在状态(或者传递其值 通过回调函数传递给父级、 侧面或 < 你的应用程序的状态管理解决方案在这里 > 的更改，以便最终将其作为道具传递回组件) ，这样您就可以获得按钮的禁用道具。

使用状态示例:

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

小开

使用常量可以组合多个字段进行验证:

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>

小开

它很简单，让我们假设您已经通过扩展 Component 创建了一个状态完整类，它包含以下内容

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


}


}
小开

另一种检查方法是内联函数，以便在每次渲染(每个道具和状态变化)时检查条件

const isDisabled = () =>
// condition check

这种方法是有效的:

<button
type="button"
disabled={this.isDisabled()}
>
Let Me In
</button>

但这不会奏效:

<button
type="button"
disabled={this.isDisabled}
>
Let Me In
</button>
小开 
<button disabled={false}>button WORKS</button>
<button disabled={true}>button DOES NOT work</button>

现在只需使用 useState 或任何其他条件将 true/false 传递到按钮，假设您正在使用 React。

小开 
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;

提交答案