我创建了一个表单输入，因此人们可以给我发送电子邮件。我希望我的按钮仅在没有来自不同输入的错误消息时才处于活动状态。到目前为止，该按钮在页面首次呈现时已被禁用，但是在我用验证（电子邮件）填充了第一个输入之后，该按钮变为启用状态。我希望在所有输入正确填充后才启用它。另外，如果我填写了所有输入，但是又清理了一个，则希望该按钮被禁用。
你能帮助我吗？
请参见下面的代码：
const validateForm = (errors) => {
let valid = true;
Object.values(errors).forEach(
(val) => val.length > 0 && (valid = false)
);
return valid;
}
class Form2 extends React.Component {
constructor(props) {
super(props);
this.state = {
isDisabled: true,
firstName: null,
email: null,
subject: null,
message: null,
errors: {
firstName: "",
email: "",
subject: "",
message: "",
}
};
}
handleSubmit = (e) => {
e.preventDefault();
emailjs.sendForm('gmail', 'template_test', e.target, "***************")
if(validateForm(this.state.errors)) {
console.info("Valid Form")
}else{
console.error("Invalid Form")
}
e.target.reset();
}
handleChange = (event) => {
event.preventDefault();
const { name, value } = event.target;
let errors = this.state.errors;
switch (name) {
case "firstName":
errors.firstName =
value.length < 3
? "Enter your name"
: "";
break;
case "email":
errors.email =
validEmailRegex.test(value)
? ""
: "Enter a valid email address";
break;
case "subject":
errors.subject =
value.length < 3
? "Enter a subject at least 3 characters long"
: "";
break;
case "message" :
errors.message =
value.length < 10
? "Enter your message. It must be at least 10 characters long"
: "";
default:
break;
}
this.setState({errors, [name]: value});
if(errors.email.length < 1 && errors.subject.length < 1 && errors.message.length < 1){
this.setState({isDisabled: false})
} else if(errors.email.length > 0 && errors.subject.length > 0 && errors.message.length > 0){
this.setState({isDisabled: true})
}
}
render(){
const {errors} = this.state;
return (
<div>
<div className="container fluid">
<form onSubmit={this.handleSubmit}>
<div className="row pt-5 mx-auto">
<div className="col-8 form-group mx-auto">
<input type="text" className="form-control" placeholder="Name" name="name"/>
{errors.firstName.length > 0 &&
<span className='error'>{errors.firstName}</span>}
</div>
<div className="col-8 form-group pt-2 mx-auto">
<input type="email" className="form-control" placeholder="Email Address" name="email" onChange={this.handleChange} noValidate/>
{errors.email.length > 0 &&
<span className='error'>{errors.email}</span>}
</div>
<div className="col-8 form-group pt-2 mx-auto">
<input type="text" className="form-control" placeholder="Subject" name="subject" onChange={this.handleChange} noValidate/>
{errors.subject.length > 0 &&
<span className="error">{errors.subject}</span>}
</div>
<div className="col-8 form-group pt-2 mx-auto">
<textarea className="form-control" id="" cols="30" rows="8" placeholder="Your message" name="message" onChange={this.handleChange} noValidate></textarea>
{errors.message.length > 0 &&
<span className="error">{errors.message}</span>}
</div>
<div className="col-8 pt-3 mx-auto">
<button className="btn btn-dark" disabled={this.state.isDisabled}>Submit</button>
</div>
</div>
</form>
</div>
</div>
)
}
}
export default Form2;
根据触发onChange函数的方式，我实际上将为错误消息分配默认值。
errors: {
firstName: " ",
email: " ",
subject: " ",
message: " "
}
否则，只要正确填写至少一个字段，您的switch语句就会启用该表单。
一旦这样做，您的if块逻辑就会变得简单得多：
if (
errors.email.length === 0 &&
errors.subject.length === 0 &&
errors.message.length === 0 &&
errors.firstName.length === 0
) {
this.setState({ isDisabled: false });
} else {
this.setState({ isDisabled: true });
}
另外onChange，您的姓名字段似乎没有附件，因此我也进行了修复。无论如何，这是一个有效的版本：https : //codesandbox.io/s/upbeat-ritchie-sz7zl?file=/src/App.js
还要注意，不要在所有默认错误消息中都加空格，因为这似乎有点不合常规，您可以像下面这样简单地用实际消息填充它们
errors: {
firstName: "Enter your name",
email: "Enter a valid email",
subject: "Enter a subject at least 3 characters long",
message: "Enter your message. It must be at least 10 characters long"
}
但这取决于您是否可以在页面加载时显示这些内容。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句