时间戳

首页 > 解决方案 > 如何使文本字段在未聚焦时仅显示 2 个小数，但在聚焦时显示所有小数？

reactjs - 如何使文本字段在未聚焦时仅显示 2 个小数，但在聚焦时显示所有小数？

问题描述

我需要一个允许用户输入任意数量的小数的字段，但是一旦模糊，它将显示“X.XX ...”。

我找到了一种截断值的方法，但是当输入类型为“数字”时它不显示

export default function App() {
  const [val, setVal] = useState(0.12345);
  const [focused, setFocused] = useState(false);

  return (
    <div
      className="App"
      style={{
        display: "flex",
        flexDirection: "column"
      }}
    >
      <TextField
        label="Raw Number Text Field"
        type="number"
        value={val}
        onChange={(e) => setVal(e.target.value)}
      />
      <TextField
        label="Truncated Number Text Field"
        value={truncateNumber(val)}
        type="number"
      />
      <TextField label="Truncated Text Field" value={truncateNumber(val)} />
      <TextField
        label="Truncated Text Field With Toggle onFocus"
        type="number"
        onFocus={() => {
          setFocused(true);
        }}
        onBlur={() => {
          setFocused(false);
        }}
        value={focused ? val : truncateNumber(val)}
      />
    </div>
  );
}
const decimalRegex = new RegExp(`^[+,-]?\\d+(\\.\\d{0,2)?$`);

const truncateNumber = (v) => {
  const value = Number(v);
  const hasTooManuDecimals = !decimalRegex.test(`${value}`);
  if (hasTooManuDecimals && value != null && !isNaN(value)) {
    return value.toFixed(2) + "...";
  }

  return String(value);
};

我收到“无法解析指定值“0.12 ...”，或者超出范围”

沙盒

谢谢

标签： reactjsinputmaterial-uitextfieldnumber-formatting

解决方案

  • 添加一个 boolean 类型的 state 属性，true它只在聚焦时，我们称之为truncated
  • 触发函数的字段上有onFocus和事件，让此函数切换状态onBlur
  • 有价值this.state.truncated ? this.truncateNumber(value) : value

推荐阅读