react-redux - 反应钩子,用 reduxForm 验证表单
问题描述
我有外部组件管理我的输入字段,如果没有输入,则会引发错误。在之前提交表单class component
以及reduxForm
效果时,这将引发丢失输入的错误,我想知道如何使用钩子来实现这一点,因为无论我是否有输入,提交都会通过。
import ConstructField from '../components.render';
const ActivitiesForm = () => {
const handleSubmit_ = () => {
console.log({ activityName });
};
const [activityName, setActivityName] = useState(null);
const handleInputName = (e) => setActivityName(e.target.value);
const { items } = useSelector((state) => ({
items: state.items,
}));
const { register, handleSubmit, errors, control } = useForm();
return (
<div>
<Form onSubmit={handleSubmit(handleSubmit_)} className='ui form'>
<Form.Group widths='equal'>
<Field
component={ConstructField('input')}
onChange={handleInputName}
label='Activity Name'
name='activityName'
placeholder='Activity Name'
validate={required}
/>
</Form.Group>
<br />
<Form.Group inline>
<Button.Group>
<Button primary>Save</Button>
<Button.Or />
<Button positive onClick={goBackButton}>
Go Back
</Button>
</Button.Group>
</Form.Group>
</Form>
</div>
);
};
const required = (value) => (value ? undefined : 'this field is required');
const activityform = reduxForm({
form: 'activityform',
enableReinitialize: true,
})(ActivitiesForm);
export default activityform;
解决方案
推荐阅读
- tensorflow - 从检查点加载 BERT 时评估精度不同
- sql - 如何添加/减去具有空值的多个选择语句
- java - AWS 中的生产级微服务架构
- android - 是否可以仅为 Android 模块调用该类?
- git - git undo 合并到 master,但将更改保留在本地
- jquery - 如何在 jquery init 方法中调用特定函数
- react-native - 使用 FlatList 渲染项目时在哪里放置逻辑
- c# - 自定义 IEqualityComparer 使用 LINQ 计算两个列表之间的差异,除了
- python - Jinja 模板 - 从表格列中删除重复项
- .net - 线程使用量增加——找到需求在哪里