![](/img/trans.png)
[英]How to forwardRef selected value from React-Select to react-hook-form
[英]Reset selected values from react-select within react-hook-form on submit?
我正在替换我的应用程序中的一些select
输入以使用react-select
。 在使用react-select
之前,我使用.reset()
function 在提交时清除表单中的选定选项,现在似乎没有任何影响。
我尝试在onSubmit
function 中存储一个变量,其中null
作为要设置为Controller
中的defaultValue
属性的值,认为它会重置。 然而这并没有奏效。 什么是处理这个问题的干净方法?
父表单组件:
function AddActivityForm(props) {
const { register, handleSubmit, control, watch, errors } = useForm();
const onSubmit = (data) => {
//Additional logic here
document.getElementById("activity-entry-form").reset();
};
return (
<Form id="activity-entry-form" onSubmit={handleSubmit(onSubmit)}>
<ActivityPredecessorInput
activities={props.activities}
formCont={control}
/>
<Button variant="primary" type="submit" className="mb-2">
Submit
</Button>
</Form>
);
}
export default AddActivityForm;
使用来自react-select
Select
的孩子:
function ActivityPredecessorInput(props) {
const activities = props.activities;
const options = activities.map((activity, index) => ({
key: index,
value: activity.itemname,
label: activity.itemname,
}));
return (
<Form.Group controlId="" className="mx-2">
<Form.Label>Activities Before</Form.Label>
<Controller
as={
<Select
isMulti
options={options}
className="basic-multi-select"
classNamePrefix="select"
/>
}
control={props.formCont}
name="activitiesbefore"
defaultValue={""}
/>
</Form.Group>
);
}
export default ActivityPredecessorInput;
根据@Bill 在原始帖子的评论中提供的示例回答我自己的问题。 React-hook-form 提供了一种重置方法,可以非常简单地处理这种情况。
创建一个const
来存储默认值(在这种情况下存储在父组件中)。
const defaultValues = {
activitiesbefore: "",
};
在useForm
const
中包含reset
方法。
const { register, handleSubmit, reset, control, watch, errors } = useForm();
在传递defaultValues
的onSubmit
function 中调用reset
方法。
reset(defaultValues);
您可以将 onClick onClick={()=> setValue("activitiesbefore", "")}
参数与来自 useForm const { register, handleSubmit, errors, reset, control, setValue} = useForm();
到重置按钮,或提交按钮
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.