react-hook-form 将表单撤消到以前的状态答案

【问题标题】：react-hook-form undo the form to previous statereact-hook-form 将表单撤消到以前的状态
【发布时间】：2021-05-09 04:15:44
【问题描述】：

我用 react-hook-form 的 setValue 函数填充了一个表单（我不知道这是否是在编辑模式下设置表单的最佳方式）。

一旦用户触摸了表单，我希望（单击按钮）将表单恢复到我之前设置的状态，（请注意，我不想重置它，但是，将其重新设置为我之前设置的值）

const { register, handleSubmit, watch, reset, errors, setValue } = useForm();
const { id } = useParams()
const { loading, error, data } = useQuery(GET_FBUSER,{
        variables: {_id: id},
        skip: id === undefined
    });
useEffect(() => {
        if (data) {
            const {_id, id, fbId, name} = data.FBUser[0]
            setValue('_id',_id);
            setValue('id',id);
            setValue('fbId',fbId);
            setValue('name',name);
        }
    }, [data])


<form onSubmit={handleSubmit(onSubmit)}>
                <Grid container spacing={3}>
                    <Grid item xs={4}>
                        <TextField fullWidth inputRef={register} InputLabelProps={{ shrink: true }} InputProps={{readOnly: true}} name="_id"  label="_Id" variant="outlined" />
                    </Grid>
                    <Grid item xs={8}>
                        <TextField fullWidth inputRef={register} InputLabelProps={{ shrink: true }} InputProps={{readOnly: true}} name="id"  label="Id" variant="outlined" />
                    </Grid>
                    <Grid item xs={12}>
                        <TextField fullWidth  inputRef={register} InputLabelProps={{ shrink: true }}  name="name"  label="Name" variant="outlined" />
                    </Grid>
                    <Grid item xs={12}>
                        <TextField fullWidth error={errors.fbId} inputRef={register({required : true})} InputLabelProps={{ shrink: true , required: true}}   name="fbId"  label="Facebook Id" variant="outlined" />
                    </Grid>
                    <Grid item xs={12}>
                        <TextField fullWidth  inputRef={register}  InputLabelProps={{ shrink: true }}  name="note"  label="Note" variant="outlined" />
                    </Grid>
                    <Grid item xs={12}>
                        <Button type="submit" variant="contained" color="primary" startIcon={<SaveIcon/>}>Salva</Button>
                        <Button  onClick={reset} variant="contained" color="primary" startIcon={<CancelIcon/>}>Annulla</Button>
                    </Grid>
                </Grid>
            </form>

【问题讨论】：

标签： reactjs react-hooks react-hook-form

【解决方案1】：

您应该在 reset 方法中传递一个带有表单字段值的对象。

reset({
  type: "contact",
  firstName: "John",
  lastName: "Doe"
})

如果您在 useForm 钩子中设置默认初始值，调用 reset() 会导致表单字段设置为您的初始值，但如果您传递具有不同数据的对象，则字段设置为值你通过了。

因此，在您的情况下，您应该在特定时刻保存表单状态，也许使用 getValues()，然后单击按钮设置您想要的值。

文档： Reset - React Hook Form

示例： Reset Example - Codesandbox

【讨论】：

或者更简单，在编辑模式下设置表单应该设置它的初始值（而不是 setValue()）并简单地调用 reset()，对吗？
确切地说，在对象中包含初始值要方便得多，即使它们是空的，因此您可以对像 yup 这样的表单验证器使用相同的对象结构，并且可以更清晰地查看表单结构和价值观。我个人经常定义空的初始值，然后在 useEffect 调用时更新它们。将初始值对象存储在变量中允许我简单地调用form.reset(initialValues); 来恢复其初始状态。