React Hooks实现点击按钮时空输入框弹出错误提示、输入后自动隐藏的方案咨询

现有代码核心问题 #

• 1分按钮的onClick使用逗号表达式，仅会执行校验逻辑，不会触发加分操作，另外两个得分按钮完全没有绑定校验逻辑
• 错误校验结果返回空字符串时，errors数组会存在空元素，导致errors.length > 0判断始终生效，即使校验通过也会渲染空的错误标签
• 没有监听输入框内容变化，无法实现输入内容后自动隐藏错误提示的效果
• 三个得分处理函数逻辑高度重复，存在大量冗余代码

修改方案 #

1. 简化错误状态管理

你当前仅需要一个必填校验，直接用字符串存储错误信息即可，无需使用数组：

// 把原来的useState([])替换为
const [error, setError] = useState('');

重写校验函数，校验后直接返回是否通过的结果，方便后续逻辑判断：

const validate = () => {
  const errMsg = number.trim().length > 0 ? '' : '请输入得分球员号码';
  setError(errMsg);
  // 无错误时返回true，允许后续加分逻辑执行
  return !errMsg;
};

2. 实现输入内容自动清除错误

修改输入框的onChange逻辑，用户输入内容时自动清空错误提示：

<input
  type="number"
  value={number}
  placeholder="得分球员号码"
  onChange={(e) => {
    setNumber(e.target.value);
    // 输入时自动清除错误
    setError('');
  }}
  onFocus={() => setFocused(true)}
  onBlur={() => setFocused(false)}
/>
<!-- 修改错误提示渲染逻辑 -->
{error && <h4 style={{color: 'red'}}>{error}</h4>}

3. 合并重复的得分逻辑，绑定校验

将三个得分函数合并为通用函数，减少冗余代码，执行前先触发校验：

// 通用加分函数，入参为本次需要增加的分数
const addPointHandler = (point) => {
  // 校验不通过直接终止执行
  if (!validate()) return;
  const players = [...scorers];
  const pos = players.map(player => player.number).indexOf(+number);
  if (pos !== -1) {
    setScorers(scorers => 
      scorers.map((scorer, index) => 
        index === pos ? {...scorer, totPoints: scorer.totPoints + point} : scorer
      )
    );
  } else {
    const newScorer = {
      id: Math.floor(Math.random() * 1000),
      number: +number,
      totPoints: point,
    };
    setScorers([...scorers, newScorer]);
  }
  setNumber('');
};

修改按钮的点击绑定：

<button onClick={() => addPointHandler(1)}>1分</button>
<button onClick={() => addPointHandler(2)}>2分</button>
<button onClick={() => addPointHandler(3)}>3分</button>

可选优化 #

你代码中定义的totPoints状态无实际作用，setTotPoints(totPoints)属于无效赋值，可以直接删除该状态；如果需要展示全队总得分，直接对scorers数组做reduce计算即可。
另外你已经提前定义了sortedScorers，渲染表格时无需再次排序，直接使用该变量即可。

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