Почему начальное значение не задано в автозаполнении пользовательского интерфейса материала с использованием формы реакции? - PullRequest
Новая
       20

Почему начальное значение не задано в автозаполнении пользовательского интерфейса материала с использованием формы реакции?

0 голосов
/ 07 февраля 2020

Я использую 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
    }
  });

ожидаемый результат Список Шиндлера значение должно быть выбрано

1 Ответ

0 голосов
/ 07 февраля 2020

Сначала вам нужно будет использовать метод 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)}

Вот полные изменения вашего кода (здесь разветвленная демонстрация с изменениями здесь ): 

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