我已经创建了一个Form Input，所以人们可以给我发电子邮件。我希望我的按钮只有在没有来自不同输入的错误消息的情况下才处于活动状态。到目前为止，该按钮在页面首次呈现时处于禁用状态，但在我用验证(电子邮件(填充第一个输入后，它变为启用状态。我希望它在所有输入都正确填充后才被启用。此外，如果我填充了所有输入，但又清除了一个，我希望该按钮被禁用。
你能帮我吗？
请参阅以下代码：
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"
}
但这将取决于您是否同意在页面加载时显示这些内容。
在handleChange方法上，如果有任何错误，请将isDisabled的状态设置为true，否则设置为false。
您忘记了您的逻辑：(只需将||而不是&&放在这个块中：
if (errors.email.length > 0 && errors.subject.length > 0 && errors.message.length > 0) {
this.setState({isDisabled: false})
} else if (errors.email.length === 0 || errors.subject.length === 0 || errors.message.length === 0) {
this.setState({isDisabled: true})
}