[英](P)react trigger method in functional ChildComponent
我正在 Preact 中构建一个表单,并努力验证表单提交时的输入。
<TextInput>
组件从validate.js
传递一个验证对象并自行处理验证。
父组件是一个表单,它以formData
状态存储数据并将值提交给 API。
在提交之前,我想再次验证数据以防止用户跳过一些必需的输入。
问题:解决这个问题的“反应方式”是什么?
输入:
export default function TextInput({ onChange, validation }) {
const [value, setValue] = useState(null);
const [error, setError] = useState(null);
useEffect(() => {
onChange && onChange(value);
}, [value]);
const handleBlur = (e) => {
const value = e.currentTarget.value;
if (validation) {
const errors = validate.single(value, validation);
if (errors) {
setError(errors[0]);
}
}
};
return (
<input
type="text"
onBlur={handleBlur}
onInput={e => setValue(e.target.value)}
onFocus={() => setError(null)}
/>
// show some error msg. if error is set
);
}
形式:
export default function CompetitionForm() {
const [formData, setFormData] = useState({});
const submitForm = async (e) => {
e.preventDefault();
// validate data, submit the form
};
const competitionTextInput = (key) => {
return (
<TextInput
name={key}
validation={RULES[key]}
onChange={value => {
formData[key] = value;
setFormData(formData);
}}
/>
);
};
return (
<form className="c-form" onSubmit={submitForm}>
<div className="row mb-4">
<div className="col-12 col-md-6">
{competitionTextInput('firstName')}
</div>
<div className="col-12 col-md-6">
{competitionTextInput('lastName')}
</div>
</div>
</form>
);
}
试试下面。 希望它会有所帮助
//Form:
const submitForm = async (e) => {
e.preventDefault();
e.stopPropagation();
// validate data, submit the form
};
render() {
const { validated } = this.state;
......
return (
<Form noValidate validated={validated} onSubmit={submitForm}>
</form>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.