条件验证反应表单字段使用反应表单与约束

Question

>我有两个要有条件验证的输入字段，例如，如果未提供字段输入一，则使字段输入二成为必需字段。

Answer 1

这似乎不是react-form-with-constraints开箱即用的支持。但是，您可以使用onChange函数来利用处理第二个输入字段验证的状态。

const [secondStepValidation, setSecondStepValidation] = useState(false);
const handleChange = v => {
if (v.length === 0) {
setSecondStepValidation(false);
} else if (!secondStepValidation) {
setSecondStepValidation(true);
}
};

return (
<>
<input type="text" name="firstInput"
value={this.state.password} onChange={handleChange}
required pattern=".{5,}" />
<input type="test" name="secondInput"
value={this.state.user}
required pattern=".{5,}" />
{secondStepValidation && (
<FieldFeedbacks for="password">
<FieldFeedback when="valueMissing" />
<FieldFeedback when="patternMismatch">
Should be at least 5 characters long
</FieldFeedback>
<FieldFeedback when={value => !/d/.test(value)} warning>
Should contain numbers
</FieldFeedback>
<FieldFeedback when={value => !/[a-z]/.test(value)} warning>
Should contain small letters
</FieldFeedback>
<FieldFeedback when={value => !/[A-Z]/.test(value)} warning>
Should contain capital letters
</FieldFeedback>
</FieldFeedbacks>
)}
</>
)