reactjs - Material UI 的 React 评分组件是如何在表单中使用的？

Question

我正在尝试在 react-hook-form 中使用 Material UI 的 React 评级组件。

  ... 
  <form onSubmit={handleSubmit(onSubmit)}>
      <FormControlLabel
        control={
          <Checkbox
            inputRef={register}
            name="remember"
            defaultValue={false}
          />
        }
        label="remember"
      />
      <br />
      <FormControlLabel
        control={
          <Rating
            inputRef={register}
            name="rating"
            defaultValue={2}
            precision={1}
            icon={<RadioButtonUncheckedIcon fontSize="inherit" />}
          />
        }
        label="select rating"
      />
      <Button type="submit">
        Submit
      </Button>
    </form>
    ...

我不明白为什么评级组件的值没有被注册，但复选框的值是。请在https://codesandbox.io/s/suspicious-drake-1d0kx?file=/src/form.js找到代码（提交时，评级的值不会打印到控制台，而复选框的值是）。

标签： reactjsformsmaterial-uifrontend

Answer 1

根据文档，Rating没有input元素可以将 ref 传递给 like TextFieldor Checkbox，因此解决方案是创建一个隐藏输入来替换以存储评分值

<FormControlLabel
  control={
    <>
      <input
        name="rating"
        type="number"
        value={rating}
        ref={register}
        hidden
        readOnly
      />
      <Rating
        name="rating"
        value={rating}
        precision={1}
        onChange={(_, value) => {
          setRating(value);
        }}
        icon={<RadioButtonUncheckedIcon fontSize="inherit" />}
      />
    </>
  }
  label="select rating"
/>

下面是修改的分叉代码和框链接