我有一个onChange事件正在正确填充状态。当要提交的字段为空时，我将禁用表单按钮。但是，我希望他们能够返回并填写该字段，或者填写两个字段（这是关键所在），并且如果两个字段都有一些数据可以再次启用该表单。
这是我的状态
const [formState, setFormState] = React.useState({
name: "",
package: `${data.datoCmsPricing.title}`,
email: "",
subject: "",
message: "",
"reasons": {
"weightLoss": false,
"strength": false,
"sport": false,
}
})
这里是我的onChange，目前处于名称验证状态，我只能定位所选的输入。我想检查整个表单的状态是否为空或发生更改事件，然后启用按钮。
const onChange = (e) => {
if (e.target.type === 'checkbox') {
const changedReason = e.target.getAttribute('name');
setFormState({...formState, reasons:{...formState.reasons, [changedReason]: !formState.reasons[changedReason]}});
//setFormState({...formState, [e.target.name]: e.target.checked});
console.log(formState);
} else {
setFormState({...formState, [e.target.name]: e.target.value });
}
//name validation
if (e.target.name.value === "") {
setShowMessageName(true)
setFormInvalid(false)
}
else{
setShowMessageName(false)
setFormInvalid(true)
}
}
这是我的表单验证状态
//Form Errors and Hiding and Showing
const [form, setForm] = useState(true);
function showForm(e) {
e.preventDefault();
setForm(true);
}
const [formFail, setFormFail] = useState(true);
function formFailReset(e){
e.preventDefault();
setFormFail(true);
}
const [formInvalid, setFormInvalid] = useState(true);
function formInactive(){
}
// const [nameVal, setNameVal] = useState(false);
const [showMessageName, setShowMessageName] = useState(false)
const [showMessageEmail, setShowMessageEmail] = useState(false)
//End
这是我的提交
const submitForm = async (e) => {
e.preventDefault();
//name validation
if (e.target.name.value === "") {
setShowMessageName(true)
setFormInvalid(false)
}
else{
setShowMessageName(false)
setFormInvalid(true)
}
//email validation
if (e.target.email.value === "") {
setShowMessageEmail(true)
}
else{
setShowMessageEmail(false)
}
...
这是我的表格
<PackageForm onChange={formOnChange} onSubmit={submitForm}>
{/* <input type="text" name="package" value={data.datoCmsPricing.title} /> */}
<label>
<h3>Name{ showMessageName && <span> *Required</span>}</h3>
<input
type="text"
name="name"
value={formState.name}
onChange={onChange}
/>
</label>
<label>
<h3>Email{ showMessageEmail && <span> *Required</span>}</h3>
<input
type="email"
name="email"
value={formState.email}
onChange={onChange}
/>
</label>
<label>
<h3>Subject</h3>
<input
type="text"
name="subject"
value={formState.subject}
onChange={onChange}
/>
</label>
<div>
<h3>Reasons for wanting to train</h3>
<CheckBoxes>
<label>
<h4>Weight Loss</h4>
<div class="pretty p-default">
<input
type="checkbox"
name="weightLoss"
reason="Weight Loss"
checked={formState.reasons.weightLoss}
onChange={onChange}
/>
<div class="state p-primary">
<label></label>
</div>
</div>
</label>
<label>
<h4>Strength</h4>
<div class="pretty p-default">
<input
type="checkbox"
name="strength"
reason="Strength"
checked={formState.reasons.strength}
onChange={onChange}
/>
<div class="state p-primary">
<label></label>
</div>
</div>
</label>
<label>
<h4>Sport</h4>
<div class="pretty p-default">
<input
type="checkbox"
name="sport"
reason="Sport"
checked={formState.reasons.sport}
onChange={onChange}
/>
<div class="state p-primary">
<label></label>
</div>
</div>
</label>
</CheckBoxes>
</div>
<div className="text-area">
<label>
<h3>Message</h3>
<textarea
name="message"
value={formState.message}
onChange={onChange}
/>
</label>
</div>
{formFail ?
<label className= {formInvalid ? `submitHand` : `submitHand fail`} >
{formInvalid ?
<button type="submit">Submit</button>
:
<button disabled type="submit">See Required Fields</button>
}
</label>
:
<label className="submitHand fail">
<span>Something Went Wrong</span>
<a onClick={formFailReset} href="#">Click to reset form</a>
<button disabled type="submit">Submit</button>
</label>
}
</PackageForm>
我能想到的最简单的例子。
而不是在onChange上检查输入本身，我想要整个表单，所以输入1,2,3,4的值是什么，如果它们都具有数据，则启用按钮。在这种情况下，if语句就像。
const onChangeEntireForm = (e) => {
if (e.target.email.value === "" && e.target.name.value...) {
console.log("keep button disabled");
}
else{
console.log("enable button");
}
}
我目前拥有的东西行不通，因为它一次只检查一个输入，而不是每个输入1,2,3,4或电子邮件，姓名...
const onChange = (e) => {
//name validation
if (e.target.name.value === "") {
console.log("keep button disabled");
}
else{
console.log("enable button");
}
}
您应该使用状态来检查验证。这样，您可以一次访问所有表单数据。例如：
const checkValidation = () => {
const required = ['email','subject','message'];
const invalid = required.some(key => formState[key] === '')
setShowMessageName(!invalid)
setFormInvalid(invalid)
}
因此您可以在onChange中检查验证。
const onChange = (e) => {
if (e.target.type === 'checkbox') {
const changedReason = e.target.getAttribute('name');
setFormState({...formState, reasons:{...formState.reasons, [changedReason]: !formState.reasons[changedReason]}});
//setFormState({...formState, [e.target.name]: e.target.checked});
console.log(formState);
} else {
setFormState({...formState, [e.target.name]: e.target.value });
}
//name validation
checkValidation();
}
是您的问题吗？