代码之家 › 专栏 › 技术社区 › user944513

为什么不使用react在表单中设置初始值?

react-hook-form react-hooks reactjs javascript

0

user944513 · 技术社区 · 6 年前

我在用 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
    }
  });

预期产量 辛德勒名单 应选择值

2 回复 | 直到 6 年前

1

2

wentjun 6 年前

首先,你需要使用 getValues() 方法来自 react-hook-form 获取窗体状态的值。

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

然后你的 Autocomplete ,你应该设置 defaultValue 道具,使其返回 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>
  );
}