как получить значение поля select в реаги? - PullRequest
Новая
       11

как получить значение поля select в реаги?

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

Я использую react-hook-form с пользовательским интерфейсом материала. При нажатии кнопки я хочу получить значение autocomplete select для моего поля. в настоящее время он принимает label как value мне нужно год должен быть значением

вот мой код

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

когда я выбираю { title: "The Godfather", year: 1972 }, значение должно быть 1972. в данный момент нажатие кнопки показывает The Godfather почему? 

<Autocomplete
        options={top100Films}
        getOptionLabel={option => option.title}
        renderInput={params => (
          <TextField
            {...params}
            inputRef={register}
            label={"Resolution Code"}
            variant="outlined"
            name={"resolutionCode"}
            fullWidth
          />
        )}

enter image description here />

1 Ответ

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

Вы можете найти соответствующий документ API здесь 

// From
getOptionLabel={option => option.title}
// To
getOptionLabel={option => option.year.toString()}

Обновление: опция
отображается и значение выбирается с использованием различных атрибутов 

renderOption={params => (
  <Typography gutterBottom variant="subtitle1" component="h2">
    {params.title}
  </Typography>
)}
getOptionLabel={option => option.year.toString()}

getOptionLabel

Используется для определения значения строки для данной опции. Он используется для заполнения ввода (и опций списка, если renderOption не предоставляется).

renderOption

функция (опция: T, state: object) => ReactNode option: опция для отображения. состояние: состояние компонента.

Edit React Hook Form - Get Started

Добавление:
Поскольку вопрос похож на что-то ниже

когда я выбираю {title: "Крестный отец", год: 1972}, значение должно быть 1972. В настоящее время при нажатии кнопки отображается Крестный отец, почему?

Я предполагаю, что ответ выше справиться с этим спросом.

Если вы просто хотите получить значение для вашей консоли, просто найдите его в ваших данных, поскольку опция выбора не должна дублироваться. 

  const onSubmit = data => {
    const temp = top100Films.find(x => x.title === data.resolutionCode);
    const value = temp ? temp.year.toString() : "";
    console.log(value);
  };
...