我是个新手。当输入字段为空时,我正在尝试禁用按钮。React中最好的方法是什么?
我正在做类似以下的事情:
<input ref="email"/>
<button disabled={!this.refs.email}>Let me in</button>
这是正确的吗?
这不仅仅是动态属性的重复,因为我对从一个元素向另一个元素传输/检查数据也很感兴趣。
发布于 2018-04-03 21:46:43
使用常量可以组合多个字段进行验证:
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>
发布于 2018-12-05 04:46:24
另一种检查方法是内联函数,以便在每次渲染时检查条件(每次道具和状态更改)
const isDisabled = () =>
// condition check
这是可行的:
<button
type="button"
disabled={this.isDisabled()}
>
Let Me In
</button>
但这是行不通的:
<button
type="button"
disabled={this.isDisabled}
>
Let Me In
</button>
发布于 2021-08-02 13:17:23
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;
https://stackoverflow.com/questions/30187781
复制相似问题