reactjs - 从子下拉列表中获取价值

Question

我正在尝试使用来自我创建的子组件的 react-hook-form 函数 getValues 获取值（请记住，这是一个示例，并且有一些以这种方式创建组件的逻辑）。当我单击“打印值”时，它没有获得 authorId 的值。有任何想法吗？

这是两个组件：

const { register, control, getValues } = useForm();

<Button
  onClick={() => {
    console.log(getValues());
  }}
>
  Print Values
</Button>

<FormControl variant="outlined">
  <InputLabel>Author</InputLabel>
  <Controller
    {...register}
    control={control}
    name="authorId"
    render={({ field }) => (
      <CustomDropdown control={control} category="Author" field={field} />
    )}
  />
</FormControl>

CustomDropdown.js

const CustomDropdown = ({ field }) => {
  const [selectedValues, setSelectedValues] = React.useState("");

  <Select
    {...field}
    value={selectedValues || ""}
    onChange={(e) => {
      setSelectedValues(e.target.value);
    }}
  >
    return <MenuItem key="1" value="1">
      Option 1
    </MenuItem>
    <MenuItem key="2" value="2">
      Option 2
    </MenuItem>
  </Select>;
};

标签： reactjsmaterial-uireact-hook-form

Answer 1

有几件事。首先，register需要使用输入的名称调用该方法。在您没有调用的控制器组件中register

<Controller
  {...register}

而是将其更改为：

<Controller
  {...register("authorId")}

此外，您没有使用useForm钩子来控制CustomDropdown组件的值。

相反，您使用useForm钩子不知道的自己的反应状态来控制值

const [selectedValues, setSelectedValues] = React.useState("");
// ...
onChange={(e) => { setSelectedValues(e.target.value) }}

一种解决方案是将setValue方法和组件作为属性value传递。CustomDropdown

第一个文件

const { register, control, getValues, setValue } = useForm();

const setAuthorIdValue = (value) => setValue("authorId", value);

<Button
  onClick={() => {
    console.log(getValues());
  }}
>
  Print Values
</Button>

<FormControl variant="outlined">
  <InputLabel>Author</InputLabel>
  <Controller
    {...register("authorId")}
    control={control}
    name="authorId"
    render={({ field }) => (
      <CustomDropdown
        control={control}
        category="Author"
        field={field}
        value={getValues("authorId")}
        setValue={setAuthorIdValue}
      />
    )}
  />
</FormControl>

CustomDropdown.js

const CustomDropdown = ({ field, value, setValue }) => {
  return <Select
    {...field}
    value={value || ""}
    onChange={(e) => {
      setValue(e.target.value);
    }}
  >
    return <MenuItem key="1" value="1">
      Option 1
    </MenuItem>
    <MenuItem key="2" value="2">
      Option 2
    </MenuItem>
  </Select>;
};