React中如何检测输入内容被选中并在新输入时清空输入框？

首先，你当前的代码直接修改DOM元素的value属性，这不符合React的受控组件设计思路，也是导致全选输入异常的原因之一。React中更推荐通过state来管理输入值，同时结合输入框的选中状态API来处理全选场景。

要检测输入框内容是否被全选，可以利用输入框DOM元素的selectionStart和selectionEnd属性：当selectionStart === 0且selectionEnd === 输入框当前值的长度时，说明用户选中了全部内容。

下面是修改后的受控组件实现，既保留两位小数的限制，又解决全选输入的问题：

import { useState } from 'react';

function NumberInput() {
  const [value, setValue] = useState('');

  const handleKeyPress = (e) => {
    const inputValue = e.target.value;
    const isAllSelected = e.target.selectionStart === 0 && e.target.selectionEnd === inputValue.length;
    
    // 处理全选场景：直接替换为新输入的合法字符
    if (isAllSelected) {
      if (/^[0-9.]$/.test(e.key)) {
        setValue(e.key);
        e.preventDefault();
      }
      return;
    }

    // 非全选场景：限制最多两位小数
    if (inputValue.includes('.') && inputValue.split('.')[1].length >= 2) {
      e.preventDefault();
    }
  };

  // 同步state与输入框值
  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return (
    <input
      type="text"
      value={value}
      onChange={handleChange}
      onKeyPress={handleKeyPress}
    />
  );
}

代码说明： #

• 使用useState管理输入值，形成受控组件，符合React数据流规范。
• 在handleKeyPress中先判断是否全选，若是则直接替换为新输入的数字或小数点，并阻止默认行为避免追加。
• 非全选时，保留原有两位小数的限制逻辑，通过e.preventDefault()阻止多余字符输入。
• 增加了输入字符的合法性校验，避免输入非数字/小数点的内容。

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