React字母拼写游戏：实现点击字母后隐藏已选字母的方案

核心思路是用状态维护可用字母集合，点击字母时从可用集合中移除对应项，同时更新输入框内容。以下是具体实现步骤：

1. 维护可用字母的状态 #

首先把原本的slicedLetters存入React状态（假设你用的是函数组件），同时维护输入框的内容状态：

import { useState } from 'react';

// 初始化时把原始字母数组传入状态
const [availableLetters, setAvailableLetters] = useState(slicedLetters);
const [inputValue, setInputValue] = useState('');

2. 修改点击事件处理函数 #

更新getLetterInput，实现移除选中字母+更新输入框的逻辑：

• 如果字母无重复：直接用filter过滤掉选中的字母

const getLetterInput = (e) => {
  const selectedLetter = e.target.textContent;
  // 把选中字母加到输入框
  setInputValue(prev => prev + selectedLetter);
  // 从可用字母中移除该字母
  setAvailableLetters(prev => prev.filter(letter => letter !== selectedLetter));
};

• 如果存在重复字母（比如有两个"A"）：通过索引精准移除点击的那个字母，避免误删其他重复项

// 渲染时把字母和索引传给点击事件
const getLetterInput = (selectedLetter, index) => {
  setInputValue(prev => prev + selectedLetter);
  // 复制数组并删除对应索引的项
  setAvailableLetters(prev => {
    const updatedLetters = [...prev];
    updatedLetters.splice(index, 1);
    return updatedLetters;
  });
};

3. 渲染可用字母 #

把原本的slicedLetters.map换成availableLetters.map，如果是处理重复字母的情况，还要把索引传给点击事件：

<div className="letter_wrapper">
  {availableLetters.map((l, i) => (
    <p key={i} className="letter_container">
      {/* 处理重复字母时用这个，传字母和索引 */}
      <span onClick={() => getLetterInput(l, i)} className="letter">
        {l}
      </span>
      {/* 无重复字母时用这个 */}
      {/* <span onClick={getLetterInput} className="letter">{l}</span> */}
    </p>
  ))}
</div>

这样点击某个字母后，它就会从可用字母行中消失，同时出现在输入框里，完全避免重复使用的问题。

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