如何創建一個數字字段，其中焦點添加 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