有没有办法让 Material-UI 的文本字段在与 type="number" 一起使用时返回数字而不是字符串？

Question

我正在使用 Material-UITextField来react-hook-form观察输入。我注意到无论输入的类型如何，都会返回一个字符串。这与我在代码库中使用的类型冲突。

我已经阅读了有关处理此问题的不同方法react-hook-form，通过转换返回的数据，但我找不到任何有关使 TextField 根据其使用方式返回不同类型的信息。我特别惊讶，因为据我了解，它valueAsNumber本身存在于 HTML 输入上（https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement）

Answer 1

没有办法让 MUI<TextField>天生返回数字类型。这是因为它<TextField>是基于 HTML 元素构建的<input>，而 HTML 元素本质上是一个文本字段。

如果您能够<TextField>在受控状态下使用该组件，则可以使用以下方法轻松使用 onChange 处理程序转换返回的类型valueAsNumber：

<TextField
    id="outlined-controlled"
    label="Number Field"
    value={numValue}
    type="number"
    onChange={(event) => {
        setNumValue(event.target.valueAsNumber);
    }}
/>

当然，您始终可以使用parseInt(event.target.value)或 等方法获取具体的数字类型parseFloat(event.target.value)。有许多可用的转换技术，本文很好地阐述了： https: //www.freecodecamp.org/news/how-to-convert-a-string-to-a-number-in-javascript/。

<TextField>如果您仅限于在不受控制的表单提交上下文中使用，则可以使用以下选项：将 HTML 输入值作为 JavaScript 函数参数传递。