为什么未在 Material UI Autocomplete using react-hook-form 中设置初始值？

Question

我正在使用 react-hook-form(https://react-hook-form.com/ ) 在我的演示中。

我无法设置 AutoComplete 的默认值。我已经尝试过文档中提到的 defaultValue 但它不起作用。这是我的代码：

https://codesandbox.io/s/react-hook-form-get-started-v24jk

 const { register, handleSubmit, setValue } = useForm({
    defaultValues: {
      resolutionCode: 1993
    }
  });

预期输出辛德勒的名单应该选择值

Answer 1

首先，您需要使用 react-hook-form 中的 getValues() 方法来获取表单状态的值。

const { register, handleSubmit, setValue, getValues } = useForm({
  defaultValues: {
    resolutionCode: 1993
  }
});

然后你的 Autocomplete，你应该设置 defaultValue 道具，使其 returns top100Films 数组中与年份 (1993) 匹配的对象。

defaultValue={top100Films.find((film) => film.year === getValues().resolutionCode)}

这是对您的代码所做的全部更改（通过 here 上的更改分叉了您的演示）：

import React from "react";
import ReactDOM from "react-dom";
import { useForm } from "react-hook-form";
import { Button, TextField, Typography } from "@material-ui/core";
import Autocomplete from "@material-ui/lab/Autocomplete";

const top100Films = [
  { title: "The Shawshank Redemption", year: 1994 },
  { title: "The Godfather", year: 1972 },
  { title: "The Godfather: Part II", year: 1974 },
  { title: "The Dark Knight", year: 2008 },
  { title: "12 Angry Men", year: 1957 },
  { title: "Schindler's List", year: 1993 }
];
function App() {
  const { register, handleSubmit, setValue, getValues } = useForm({
    defaultValues: {
      resolutionCode: 1993
    }
  });

  React.useEffect(() => {
    register({ name: "resolutionCode" });
  });
  const onSubmit = data => {
    console.log(data);
  };
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Autocomplete
        options={top100Films}
        getOptionLabel={option => option.title}
        defaultValue={top100Films.find((film) => film.year === getValues().resolutionCode)}
        onChange={(e, data) => {
          setValue("resolutionCode", data.year);
        }}
        renderInput={params => {
          return (
            <TextField
              {...params}
              // inputRef={register}
              label={"Resolution Code"}
              variant="outlined"
              name={"resolutionCode"}
              defaultValue={"1993"}
              fullWidth
              value={params}
            />
          );
        }}
      />
      <div className="button-group">
        <Button
          variant="contained"
          type="submit"
          className="MuiButton-sizeMedium"
          color="primary"
          disableElevation
        >
          Login
        </Button>
      </div>
    </form>
  );
}

为什么未在 Material UI Autocomplete using react-hook-form 中设置初始值？

Why is initial value not set in Material UI Autocomplete using react-hook-form?

javascript

reactjs

react-hooks

react-hook-form