React - Material-UI - Как использовать Select с несколькими значениями в реагирующей форме

Question

Я пытаюсь использовать UI-Material Select с несколькими вариантами внутри react-hook-form, но безуспешно.

Я работал до того, как попытался сделать это с несколькими вариантами

            <form onSubmit={handleSubmit(onSubmit)}>
                <Row className="mb-2">
                    <Col sm={6}>
                        <FormControl className="select-language">
                            <InputLabel> {t('Languages')}</InputLabel>
                            <Controller
                                as={
                                    <Select>
                                        {Config.languages.map(m => <MenuItem key={m.code} value={m.text}> {t(m.text)} </MenuItem>)}
                                    </Select>
                                }
                                defaultValue={user.language}
                                name="language"
                                control={control}
                            >
                            </Controller>

                        </FormControl>

                    </Col>
                </Row>
         </form>

Я попытался добавить multiple к элементу Select, что привело меня к другой ошибке.

Я также попытался сохранить только элемент Select без оболочки Controller, но потом не могу получить значение языка в onSubmit

Очень простой codeSandBox, который показывает, что я не могу получить значение из Select при отправке формы: https://codesandbox.io/s/react-hook-form-example-s7h5p?file= / src / index. js

Буду признателен за любую помощь Спасибо

Answer 1

Прежде всего, я думаю, что ваша версия на v3, поэтому вы можете обновить: https://codesandbox.io/s/react-hook-form-example-5lrij?file= / src / index. js

import React from "react";
import ReactDOM from "react-dom";
import { useForm, Controller } from "react-hook-form";
import { Select, MenuItem } from "@material-ui/core";

import "./styles.css";

const languages = [
  {
    code: "en-US",
    text: "English"
  },
  {
    code: "zu",
    text: "Another Language"
  }
];

export default function App() {
  const { register, handleSubmit, control } = useForm();
  const onSubmit = data => console.log(data);

  return (
    <div className="container">
      <div className="col-sm-12">
        <h3>Client Profile</h3>
      </div>
      <div className="col-sm-12">
        <form onSubmit={handleSubmit(onSubmit)}>
          <div className="form-group">
            <input
              className="form-control"
              type="text"
              placeholder="Name"
              name="Name"
              ref={register}
            />
          </div>

          <div className="form-group">
            <Controller
              name="Language"
              control={control}
              as={
                <Select>
                  {languages.map(m => (
                    <MenuItem key={m.code} value={m.text}>
                      {" "}
                      {m.text}{" "}
                    </MenuItem>
                  ))}
                </Select>
              }
              defaultValue={languages[0].text}
            />
          </div>
          <div className="form-group">
            <input className="btn btn-primary" type="submit" />
          </div>
        </form>
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

здесь исправленная версия с использованием контроллера