0

我正在尝试在Select内部使用带有多个选项的 UI-Materialreact-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

我将不胜感激任何帮助谢谢

4

3 回答 3

2

我知道这个旧的但以后可能有人需要它，也许这个对你有用，只需检查渲染控制器道具

import React from "react";
import {
  TextField,
  ListItemText,
  Checkbox,
  MenuItem,
  makeStyles
} from "@material-ui/core";
import { useForm, Controller } from "react-hook-form";

const useStyles = makeStyles({
  root: {
    width: "200px"
  },
  center: {
    textAlign: "center"
  }
});

export default function SelectTextField() {
  const classes = useStyles();
  const { handleSubmit, control } = useForm();

  const nums = [1, 2, 3, 4];

  const onSubmit = (e) => {
    console.log(e);
  };

  return (
    <form className={classes.center} onSubmit={handleSubmit(onSubmit)}>
      <Controller
        control={control}
        name="selectedNumbers"
        defaultValue={[]}
        render={({ onChange, value }) => {
          console.log(value);
          return (
            <TextField
              classes={{ root: classes.root }}
              select
              id="Numbers"
              variant="outlined"
              label="Numbers"
              SelectProps={{
                multiple: true,
                value: value,
                renderValue: (selected) => selected.join(", "),
                onChange: onChange
              }}
            >
              {nums.map((n) => (
                <MenuItem key={n} value={n}>
                  <Checkbox checked={value.includes(n)} />
                  <ListItemText primary={n} />
                </MenuItem>
              ))}
            </TextField>
          );
        }}
      />
      <div>
        <button type="submit">Submit</button>
      </div>
    </form>
  );
}

另外，你可以在这里玩它 https://codesandbox.io/s/multi-select-input-u0cr3?file=/demo.js

也可以在文档 https://react-hook-form.com/get-started#ReactNative上检查这一点

于 2020-12-16T17:10:39.830 回答
2

如果有人在寻找简单的解决方案，这可能会派上用场。现在使用 Select Component 可以轻松实现多个选择选项。如果您查看 Select 组件，您只需将默认值设置为数组并传递“multiple”道具。

import {
  Button,
  FormControl,
  InputLabel,
  MenuItem,
  Select
} from "@mui/material";
import { Controller, useForm } from "react-hook-form";

const FCWidth = {
  width: "20rem"
};

export default function App() {
  const { control, handleSubmit } = useForm();
  const formSubmitHandler = (formData) => {
    console.log(formData);
  };

  const ages = ["10", "20", "30"];

  return (
    <div className="App">
      <form onSubmit={handleSubmit(formSubmitHandler)}>
        <Controller
          name="age"
          control={control}
          type="text"
          defaultValue={[]}
          render={({ field }) => (
            <FormControl sx={FCWidth}>
              <InputLabel id="age">Age</InputLabel>
              <Select
                {...field}
                labelId="age"
                label="age"
                multiple
                defaultValue={[]}
              >
                {ages.map((age) => (
                  <MenuItem value={age} key={age}>
                    {age}
                  </MenuItem>
                ))}
              </Select>
            </FormControl>
          )}
        />
        <FormControl sx={FCWidth}>
          <Button
            type="submit"
            variant="contained"
            fullWidth
            sx={{ marginTop: ".75rem", fontWeight: "bold" }}
          >
            Submit
          </Button>
        </FormControl>
      </form>
    </div>
  );
}

这是代码沙箱链接https://codesandbox.io/s/select-multiple-option-with-mui-and-react-hook-form-2kv2o

于 2021-10-12T21:12:07.010 回答
0

首先，我认为您的版本在 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);

这是使用控制器的固定版本

于 2020-04-18T03:36:57.050 回答