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

Question

我有一个文本字段：

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

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

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

Answer 1

您可以通过创建受控输入并使用输入的 onBlur 功能来完成此操作，该功能将在您完成输入编辑后执行 onBlur function。 此 function 将更改为数字添加 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>
);
}

Answer 2

尝试这个：

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

// result 3.300

解释：
这里toFixed(n)方法用来扩展值。
其中n是您要扩展数字值的数字。

点击这里获取更多信息

Answer 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;

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

问题描述

3 个解决方案

解决方案1
2 已采纳 2020-12-07 17:28:52

解决方案2
1 2020-12-07 17:04:27

解决方案3
1 2020-12-07 17:25:16

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

问题描述

3 个解决方案

解决方案1 2 已采纳 2020-12-07 17:28:52

解决方案2 1 2020-12-07 17:04:27

解决方案3 1 2020-12-07 17:25:16

解决方案1
2 已采纳 2020-12-07 17:28:52

解决方案2
1 2020-12-07 17:04:27

解决方案3
1 2020-12-07 17:25:16