如何创建一个数字字段，其中焦点向外添加 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

试试这个：

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

// result 3.300

Explanation:
here toFixed(n) method used to extend value.
Where n is the number you want to extend value of number.

Click here for more info

Answer 2

这是您可以使用 material 实现的一种方法。我假设您不希望在焦点离开控件之前格式化文本。 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;

Answer 3

您可以通过创建受控输入并使用输入的 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>
);
}

如何创建一个数字字段，其中焦点向外添加 3 个小数位？

How can I create a numeric field where the focus out adds 3 decimal digits?

javascript

html

reactjs

typescript

decimal