如何创建一个数字字段，其中焦点添加 3 个十进制数字？答案

【问题标题】：How can I create a numeric field where the focus out adds 3 decimal digits?如何创建一个数字字段，其中焦点添加 3 个十进制数字？
【发布时间】：2020-12-07 16:45:01
【问题描述】：

我有一个文本字段：

  <Grid item xs={12} sm={6}>
      <BzTextField
        fullWidth
        label="dec"
        value={company.dex}
      />
    </Grid>

我要做的是创建一个新组件，这样我就可以创建一个新的输入类型数字，该数字必须添加 3 个十进制数字（例如 3.3 变为 3.300）。我对如何实现这样的事情有疑问。我应该使用 Hooks 还是有更简单的方法。

验证也应该是 onChange 而不是 keyUp。

【问题讨论】：

标签： javascript html reactjs typescript decimal

【解决方案1】：

您可以通过创建受控输入并使用输入的 onBlur 功能来做到这一点，该功能将在您完成输入编辑后执行 onBlur 功能。此功能将更改数字添加 3 位小数。

function App() {
const [input, setInput] = React.useState("")
const onBlur = () => {
    setInput(parseFloat(input).toFixed(3))
}
return (
<div >
    <body>
        <input
            type="number"
            value={input}
            onChange={e=>setInput(e.target.value)}
            onBlur={onBlur}
        />
    </body>
</div>
);
}

【讨论】：

【解决方案2】：

试试这个：

const x = 3.3;
const y = x.toFixed(3);
console.log(y);

// result 3.300

说明：
这里toFixed(n)方法用来扩展值。
其中n是你想要扩展数值的数字。

Click here for more info

【讨论】：

【解决方案3】：

这是使用材料的一种方法。我假设您不希望在焦点离开控件之前格式化文本。 material 中的 onChange 事件会在每次按键时触发，因此很难单独使用该事件进行格式化。

import React, { useState } from 'react';
import { TextField } from '@material-ui/core';

const BzTextField = ({ defaultValue = '' }) => {
    const [value, setValue] = useState(defaultValue);

    const handleBlur = (e) => {
        let parsedValue = parseFloat(e.target.value);

        if (parsedValue) {
            setValue(parsedValue.toFixed(3));
        }
    }

    return (
        <TextField
            type="number"
            fullWidth
            label="dec"
            value={value}
            onBlur={handleBlur}/>    
    );
};

export default BzTextField;

【讨论】：