React实现随机方块依次闪烁并记录ID的技术求助

嘿，我懂你现在的困扰——点击按钮后想让3个方块依次闪烁，但目前可能是一起闪或者达不到预期效果对吧？核心问题在于你没给每个闪烁动作加延迟，导致所有方块的状态同时更新了。我给你调整下代码，实现依次闪烁的效果，同时把闪烁的方块ID存起来：

首先，我们需要在组件状态里加几个关键变量：用来记录当前正在闪烁的方块、选中的ID列表，还有一个标记防止重复点击（避免用户连续点按钮导致多个闪烁序列冲突）。然后通过定时器控制每个方块的闪烁时机，让它们逐个执行。

下面是修改后的完整代码：

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      colors: ['yellow', 'red', 'blue', 'green'],
      quantity: 3,
      selectedIds: [], // 存储闪烁的方块ID
      currentFlash: {}, // 记录当前闪烁的方块及其颜色
      isFlashing: false // 标记是否正在闪烁，防止重复触发
    };
  }

  handleStart = () => {
    // 如果正在闪烁，直接返回，不响应点击
    if (this.state.isFlashing) return;

    // 随机选出3个不重复的方块ID（假设方块ID为0-3）
    const allIds = [0, 1, 2, 3];
    const selectedIds = [];
    while (selectedIds.length < this.state.quantity) {
      const randomIdx = Math.floor(Math.random() * allIds.length);
      const id = allIds.splice(randomIdx, 1)[0];
      selectedIds.push(id);
    }

    // 更新选中的ID列表，标记开始闪烁
    this.setState({ selectedIds, isFlashing: true }, () => {
      // 依次处理每个选中的方块，每个间隔1.5秒（可根据需求调整）
      this.state.selectedIds.forEach((id, index) => {
        setTimeout(() => {
          // 第一步：设置方块为对应颜色，开始闪烁
          this.setState({
            currentFlash: { [id]: this.state.colors[id] }
          });

          // 第二步：1秒后恢复原颜色（闪烁持续时长）
          setTimeout(() => {
            this.setState({ currentFlash: {} });

            // 如果是最后一个方块，结束闪烁状态
            if (index === this.state.selectedIds.length - 1) {
              this.setState({ isFlashing: false });
            }
          }, 1000);
        }, index * 1500); // 每个方块的启动时间间隔，确保依次执行
      });
    });
  };

  render() {
    return (
      <div style={{ padding: '20px' }}>
        <button 
          onClick={this.handleStart} 
          disabled={this.state.isFlashing}
          style={{ padding: '8px 16px', marginBottom: '20px' }}
        >
          {this.state.isFlashing ? '闪烁中...' : '开始闪烁'}
        </button>
        <div className="squares" style={{ display: 'flex' }}>
          {[0, 1, 2, 3].map(id => (
            <div
              key={id}
              className="square"
              style={{
                backgroundColor: this.state.currentFlash[id] || 'gray',
                margin: '10px',
                width: '100px',
                height: '100px',
                transition: 'background-color 0.3s ease' // 添加过渡动画，让闪烁更平滑
              }}
            />
          ))}
        </div>
        <p style={{ marginTop: '20px' }}>
          本次闪烁的方块ID：{this.state.selectedIds.join(', ')}
        </p>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

关键改动说明： #

• 防止重复点击：用isFlashing状态标记当前是否在闪烁，按钮会在闪烁时禁用，避免多个闪烁序列叠加。
• 随机选不重复ID：通过循环从所有ID中随机抽取3个不重复的，确保每次选中的方块都不一样。
• 依次闪烁逻辑：用嵌套定时器实现每个方块的闪烁动作：第一个方块立即开始，第二个等1.5秒（第一个闪烁1秒+0.5秒间隔），第三个再等1.5秒，以此类推，实现依次闪烁的效果。
• 单独控制方块颜色：用currentFlash对象来单独更新每个方块的背景色，避免同时修改所有方块的状态。
• 平滑过渡动画：给方块添加transition样式，让颜色变化更自然，闪烁效果更流畅。

这样修改后，点击按钮就能看到3个方块依次以对应颜色闪烁，同时选中的ID也会存在selectedIds数组里，在页面上显示出来。

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