如何使React Rating Mui组件成为必需的

Question

TextField mui 组件有一个

required

属性，您可以设置该属性，使其在提交表单之前成为必需（会出现一个弹出窗口，要求您在提交之前填写）。

我希望需要 Rating mui 组件，但它没有此功能，我考虑将其组合到另一个可能需要的隐藏组件（也许类似于 this 答案并在那里添加

required

）但是它对我不起作用：

import React, { useState } from "react";
import Button from "@material-ui/core/Button";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Container from "@material-ui/core/Container";
import { useForm } from "react-hook-form";
import Rating from "@material-ui/lab/Rating";

export default function Create() {
  const [rating, setRating] = useState();
  const { register, handleSubmit } = useForm();
  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <Container component="main" maxWidth="xs">
      <div>
        <form onSubmit={handleSubmit(onSubmit)}>
          <FormControlLabel
            required
            control={
              <>
                <input
                  required
                  name="rating"
                  type="number"
                  value={rating}
                  ref={register}
                  hidden
                  readOnly
                />
                <Rating
                  required
                  name="rating"
                  value={rating}
                  precision={1}
                  onChange={(_, value) => {
                    setRating(value);
                  }}
                />
              </>
            }
          />
          <Button type="submit" fullWidth variant="contained" color="primary">
            Submit
          </Button>
        </form>
      </div>
    </Container>
  );
}

此代码让我无需评级即可提交。

我能做什么来解决这个问题以及为什么

Rating

没有

required

道具？

Answer 1

您可以使用

setValue

中的

react-hook-form

，这样您的值就会在表单状态中改变。然后，您也可以使用

errors

中的

react-hook-form

验证错误。并且，您可以使用 resolver 来验证并使用

.required()

来验证您的字段，例如使用 Yup。