为什么没有使用 react-hook-form 在材质 UI 自动完成中设置初始值?

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，你应该设置defaultValueprops，以便它返回与年份(1993(匹配的top100Films数组中的对象。

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

以下是对代码的完整更改(在此处使用更改分叉您的演示(：

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>
);
}