React Material UI输入框自定义：特定输入行为实现咨询

核心实现思路 #

要实现你需要的输入框行为，核心是通过受控组件控制输入值，同时监听输入事件和光标位置：

• 始终保证输入框至少保留一个0，避免用户删除初始值
• 用户输入有效数字时自动替换掉初始的0
• 当内容被删空时，自动将光标定位在0的末尾

完整代码示例 #

import { useState, useRef, useEffect } from 'react';
import TextField from '@mui/material/TextField';

const RestrictedNumberInput = () => {
  const [inputValue, setInputValue] = useState('0');
  const inputRef = useRef(null);

  const handleInputChange = (e) => {
    const rawValue = e.target.value;
    // 过滤非数字字符（如需支持小数点，可改为 /[^0-9.]/g）
    const filteredValue = rawValue.replace(/[^0-9]/g, '');

    if (filteredValue === '') {
      // 输入为空时强制重置为0
      setInputValue('0');
    } else if (filteredValue.startsWith('0') && filteredValue.length > 1) {
      // 去掉前导0，保留有效数字内容
      setInputValue(filteredValue.replace(/^0+/, ''));
    } else {
      setInputValue(filteredValue);
    }
  };

  useEffect(() => {
    // 当输入值回到0时，自动把光标移到0的后面
    if (inputValue === '0' && inputRef.current) {
      inputRef.current.setSelectionRange(1, 1);
    }
  }, [inputValue]);

  return (
    <TextField
      ref={inputRef}
      value={inputValue}
      onChange={handleInputChange}
      type="text"
      inputProps={{
        onKeyDown: (e) => {
          // 当输入值为0时，阻止退格/删除键删除这个初始0
          if (inputValue === '0' && (e.key === 'Backspace' || e.key === 'Delete')) {
            e.preventDefault();
          }
        }
      }}
      label="数字输入"
      variant="outlined"
    />
  );
};

export default RestrictedNumberInput;

关键逻辑说明 #

1. 值的强制控制
   用useState维护输入框的受控值，初始设为'0'。在handleInputChange里过滤掉非数字内容，确保输入始终是有效数字格式，同时避免出现空值。

2. 光标位置处理
   通过useRef获取输入框DOM元素，配合useEffect监听值的变化：当值重置为'0'时，调用setSelectionRange(1,1)把光标定位在0的末尾，符合需求。

3. 禁止删除初始0
   在inputProps的onKeyDown事件中，当输入值为'0'时，阻止退格和删除键的默认行为，从交互层面避免用户删掉唯一的初始0。

扩展说明 #

• 如果需要支持小数点，可修改过滤正则为/[^0-9.]/g，同时添加逻辑确保只有一个小数点（比如filteredValue.replace(/(\..*)\./g, '$1')）。
• 选用type="text"而非type="number"，是因为数字输入框的默认交互（如上下箭头）可能干扰需求，且文本输入框的光标控制更灵活。

内容的提问来源于stack exchange，提问作者AndrewOMG