时间戳

首页 > 解决方案 > 带有 Material UI TextField 的 react-hooks-form 依赖字段

reactjs - 带有 Material UI TextField 的 react-hooks-form 依赖字段

问题描述

使用 react-hooks-form 我试图根据另一个字段值更新一个字段。我面临的错误是我的值未在数据对象中注册。

这是我的代码：

const { handleSubmit, control  } = useForm({});
const [dateValue, setDateValue] = useState()

const onSubmit = (data) => {console.log(data.week)} \\ undefined


   <form
          className={classes.root}
          autoComplete="on"
          onSubmit={handleSubmit(onSubmit)}
        >
                <Controller
                  name="date"
                  control={control}
                  defaultValue={props.operation === 'edit' ? props.values.date : null}
                  render={({ field: { onChange, value }, fieldState: { error } }) => (
                    <TextField
                      id="date"
                      type="date"
                      label="date"
                      value={value}
                      className={classes.textField}
                      onChange={(event) => {
                        onChange(event.target.value); 
                        setDateValue(event.target.value);
                      }}
                      error={!!error}
                      helperText={error ? error.message : null}
                      InputLabelProps={{
                        shrink: true,
                      }}
                    />
                  )}
                  rules={{ required: 'Date is required' }}
                />


 <Controller
                        name="week"
                        control={control}
                        defaultValue=""
                        render={({ field: { onChange, value }, fieldState: { error } }) => (
                            <TextField
                                id="week"
                                type="text"
                                className={classes.textField}
                                label="week"
                                disabled={true}
                                value={dateValue}
                                onChange={onChange}
                                error={!!error}
                                helperText={error ? error.message : null}
                            />
                        )
                    />

</form>

最后，我的周值是一个函数的结果，该函数返回一个包含周 - 年连接的字符串。

该值在 TextField 中更新，但未在数据对象中注册。知道我错过了什么吗？

标签： reactjsreact-hooksmaterial-uireact-hook-form

解决方案

在字段的onChange处理程序上，date您只更新dateValue表单本身的状态而不是状态。

您有 2 个选项：

  1. 在onChange日期字段的处理程序中调用setValue您从中获取的方法useForm

  2. 观察日期字段的值const date = watch('date')并useEffect更新星期字段的值：

const {watch, setValue} = useForm()

const date = watch('date')

useEffect(() => {
  const calculateWeekValue = () => {...//}
  setValue('week', calculateWeekValue(date))
}, [date, setValue])

推荐阅读