表单接收到错误的数据类型，返回字符串而不是数字或 NaN答案

【问题标题】：Form is receiving the wrong data type, returning a string instead of number or NaN表单接收到错误的数据类型，返回字符串而不是数字或 NaN
【发布时间】：2021-05-10 20:38:15
【问题描述】：

我正在尝试使用 react-hook-form 和 Material-ui 在我的表单中捕获正确的数据，但是我在各种输入方面遇到了困难，这是我得到的提交结果和列出的工作示例以及什么不起作用。

{
    "height": 183,
    "current_weight": NaN,
    "weekly_goal": "0.5"
}

我的 jsx：

1)返回数字的高度输入（一切正常）：

<input {...register("height", { valueAsNumber: true })} />

2) 使用 Material-Ui 的权重输入返回 NaN：

        <TextField
          className={classes.input}
          id="outlined-basic"
          type="number"
          label="current_weight"
          variant="outlined"
          {...register("current_weight", {
            valueAsNumber: true,
          })}
        />

3) 使用自定义单选按钮组件返回字符串而不是数字：

            <MediumRadioButton
              title={"Lose 0.2 kilograms per week"}
              value={0.2}
              {...register("weekly_goal", { valueAsNumber: true })}
            />

我做错了什么，material-ui组件有问题吗？

【问题讨论】：

标签： reactjs forms material-ui react-hook-form

【解决方案1】：

您好，当您使用 Material-Ui 或任何 ui 库时，您需要以反应钩子形式使用控制器组件 Integrating Controlled Inputs 并查看此示例以简化您的操作 React Hook Form - Controller In Code SandBox

【讨论】：