从(React)按钮中删除 "disabled" 后,onClick 不起作用
onClick does not work after removing "disabled" from (React) button
const MIN_LENGTH = 6;
class Login extends React.Component {
constructor() {
super();
this.state = {
email: '',
password: '',
emailValid: false,
passwordValid: false,
// redirect: false,
};
this.handleEmail = this.handleEmail.bind(this);
this.handlePassword = this.handlePassword.bind(this);
this.handleClick = this.handleClick.bind(this);
}
componentDidUpdate() {
this.handleButton();
}
handleEmail(ev) {
const email = ev.target.value;
const re = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
const isValid = re.test(email);
if (isValid) {
this.setState({ emailValid: true, email });
} else {
this.setState({ emailValid: false, email: '' });
}
}
handlePassword(ev) {
const size = ev.target.value.length;
if (size >= MIN_LENGTH) {
this.setState({ passwordValid: true, password: ev.target.value });
} else {
this.setState({ passwordValid: false, password: '' });
}
}
handleButton() {
const { emailValid, passwordValid } = this.state;
const btn = document.getElementById('btnLogin');
if (emailValid && passwordValid) {
btn.disabled = false;
} else {
btn.disabled = true;
}
}
handleClick(ev) {
console.log(ev);
ev.preventDefault();
console.log('click!');
}
render() {
const { email, password, emailValid, passwordValid } = this.state;
if (emailValid && passwordValid) {
console.log(`Email:${email}\nSenha:${password}`);
}
return (
<section>
<label htmlFor="email-input">
Email
<input type="email" data-testid="email-input" onChange={ this.handleEmail } />
</label>
<br />
<label htmlFor="password-input">
Password
<input
type="password"
data-testid="password-input"
onChange={ this.handlePassword }
/>
</label>
<br />
<button
type="button"
id="btnLogin"
onClick={ this.handleClick }
disabled
>
Login
</button>
</section>
);
}
}
export default Login;
上面的代码是一个将登录我的应用程序的 React 组件。重要的是要说验证工作完美,按钮仅在一切顺利时启用,但是当单击按钮时没有任何 happens.The 函数“handleEmail”具有通过正则表达式验证电子邮件有效性的作用,并且电子邮件仅在有效时才在组件状态中更改。 “handlePassword”函数仅检查输入的密码是否大于或等于 6。我将此信息存储在组件的状态中,但我的想法是将来使用“Redux”将此数据保存在全局状态中。我现在唯一的问题是按钮的 onClick 错误。
你不应该直接从React中访问dom元素,因为react使用js控制每个组件并且看不到你已经改变了html中的属性。你不应该做这样的事情:
handleButton() {
const { emailValid, passwordValid } = this.state;
const btn = document.getElementById('btnLogin');
if (emailValid && passwordValid) {
btn.disabled = false;
} else {
btn.disabled = true;
}
}
您应该将 属性 添加到存储按钮状态的状态。 Aka,添加 disabled
布尔值 属性 并在处理程序中更改它。
你的按钮看起来像:
<button ... disabled={this.state.buttonDisabled} />
您的 handleButton 将如下所示:
handleButton() {
const { emailValid, passwordValid } = this.state;
this.setState({
buttonDisabled: !(emailValid && passwordValid)
});
}
const MIN_LENGTH = 6;
class Login extends React.Component {
constructor() {
super();
this.state = {
email: '',
password: '',
emailValid: false,
passwordValid: false,
// redirect: false,
};
this.handleEmail = this.handleEmail.bind(this);
this.handlePassword = this.handlePassword.bind(this);
this.handleClick = this.handleClick.bind(this);
}
componentDidUpdate() {
this.handleButton();
}
handleEmail(ev) {
const email = ev.target.value;
const re = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
const isValid = re.test(email);
if (isValid) {
this.setState({ emailValid: true, email });
} else {
this.setState({ emailValid: false, email: '' });
}
}
handlePassword(ev) {
const size = ev.target.value.length;
if (size >= MIN_LENGTH) {
this.setState({ passwordValid: true, password: ev.target.value });
} else {
this.setState({ passwordValid: false, password: '' });
}
}
handleButton() {
const { emailValid, passwordValid } = this.state;
const btn = document.getElementById('btnLogin');
if (emailValid && passwordValid) {
btn.disabled = false;
} else {
btn.disabled = true;
}
}
handleClick(ev) {
console.log(ev);
ev.preventDefault();
console.log('click!');
}
render() {
const { email, password, emailValid, passwordValid } = this.state;
if (emailValid && passwordValid) {
console.log(`Email:${email}\nSenha:${password}`);
}
return (
<section>
<label htmlFor="email-input">
Email
<input type="email" data-testid="email-input" onChange={ this.handleEmail } />
</label>
<br />
<label htmlFor="password-input">
Password
<input
type="password"
data-testid="password-input"
onChange={ this.handlePassword }
/>
</label>
<br />
<button
type="button"
id="btnLogin"
onClick={ this.handleClick }
disabled
>
Login
</button>
</section>
);
}
}
export default Login;
上面的代码是一个将登录我的应用程序的 React 组件。重要的是要说验证工作完美,按钮仅在一切顺利时启用,但是当单击按钮时没有任何 happens.The 函数“handleEmail”具有通过正则表达式验证电子邮件有效性的作用,并且电子邮件仅在有效时才在组件状态中更改。 “handlePassword”函数仅检查输入的密码是否大于或等于 6。我将此信息存储在组件的状态中,但我的想法是将来使用“Redux”将此数据保存在全局状态中。我现在唯一的问题是按钮的 onClick 错误。
你不应该直接从React中访问dom元素,因为react使用js控制每个组件并且看不到你已经改变了html中的属性。你不应该做这样的事情:
handleButton() {
const { emailValid, passwordValid } = this.state;
const btn = document.getElementById('btnLogin');
if (emailValid && passwordValid) {
btn.disabled = false;
} else {
btn.disabled = true;
}
}
您应该将 属性 添加到存储按钮状态的状态。 Aka,添加 disabled
布尔值 属性 并在处理程序中更改它。
你的按钮看起来像:
<button ... disabled={this.state.buttonDisabled} />
您的 handleButton 将如下所示:
handleButton() {
const { emailValid, passwordValid } = this.state;
this.setState({
buttonDisabled: !(emailValid && passwordValid)
});
}