React 中实现点击字母后动态隐藏并禁用重复选择的完整教程-js教程-PHP中文网

React 中实现点击字母后动态隐藏并禁用重复选择的完整教程

本文详解如何在 react 应用中通过状态管理动态显示/隐藏字母元素，利用 usestate 和函数式更新安全移除已点击字母，并确保 ui 实时响应、逻辑健壮。

本文详解如何在 react 应用中通过状态管理动态显示/隐藏字母元素，利用 usestate 和函数式更新安全移除已点击字母，并确保 ui 实时响应、逻辑健壮。

在构建单词拼写类游戏（如给定 6 个字母，玩家点击组成单词）时，一个核心交互需求是：字母被点击一次后，必须立即从可选区域消失，防止重复选取。这看似简单，但若不正确管理状态，极易引发 UI 不同步、重复渲染或闭包 stale state 等问题。

✅ 正确做法：用 useState 管理可选字母列表，并函数式更新

首先，将初始字母数组存入 React 状态，而非普通变量：

Orderly Sdk React Hooks

Orderly React SDK 钩子使用参考指南，包括 useOrderEntry、usePositionStream、useOrderbookStream、useCollateral 等。

下载

import { useState } from 'react';

function WordGame() {
  // 初始 6 个字母（例如来自随机打乱）
  const initialLetters = ['A', 'B', 'C', 'D', 'E', 'F'];
  const [slicedLetters, setSlicedLetters] = useState(initialLetters);
  const [inputWord, setInputWord] = useState('');

  const getLetterInput = (clickedLetter) => {
    // 1. 将点击的字母追加到当前输入（如需显示在输入框）
    setInputWord(prev => prev + clickedLetter);

    // 2. 安全移除该字母：使用函数式更新 + filter，避免依赖闭包中的旧状态
    setSlicedLetters(prev => prev.filter(letter => letter !== clickedLetter));
  };

  return (
    <div>
      <h2>拼出你的单词：</h2>
      <div classname="input-display">{inputWord}</div>

      <div classname="letter_wrapper">
        {slicedLetters.map((letter, index) => (
          <p key="{index}" classname="letter_container">
            <span onclick="{()"> getLetterInput(letter)} 
              className="letter"
              role="button"
              tabIndex={0}
              onKeyPress={(e) => e.key === 'Enter' && getLetterInput(letter)}
            >
              {letter}
            </span>
          </p>
        ))}
      </div>
    </div>
  );
}

export default WordGame;

? 关键要点说明

必须用 useState：只有状态变量的变化才能触发 React 重新渲染，普通变量修改不会更新 UI。
务必使用函数式更新（setX(prev => ...)）：因为 setSlicedLetters 是异步的，直接写 slicedLetters.filter(...) 可能读取到过期的值（尤其在快速连点或批量操作时）。函数式更新确保基于最新状态计算。
key 要稳定且唯一：本例中若字母可能重复（如两个 'A'），仅用 index 作 key 会导致渲染异常。更健壮的做法是为每个字母生成唯一 ID（如 uuid() 或 letter + index 组合），或改用 filter 的索引逻辑配合 splice（但推荐优先用内容过滤）。
无障碍支持：添加 role="button"、tabIndex 和 onKeyPress，让键盘用户也能通过 Enter 键触发点击，提升可访问性。

⚠️ 常见错误与规避

❌ 错误：setSlicedLetters(slicedLetters.filter(...)) —— 依赖外部 slicedLetters，易捕获 stale state。
❌ 错误：slicedLetters.splice(i, 1) 后直接 setSlicedLetters(slicedLetters) —— splice 是原地修改，违反不可变原则，且仍存在 stale state 风险。
✅ 正确：始终使用 prev => prev.filter(...)，保证状态更新逻辑纯正、可预测。