React组件中动态管理CSS类名以实现交互反馈

import React, { useState } from 'react';
import classNames from 'classnames'; // 引入 classnames 工具库

const CORRECT = 'correct';
const WRONG = 'wrong';

function YourGameComponent() {
  // ... 其他状态和逻辑

  // 定义 userAnswer 状态，初始值为 null
  const [userAnswer, setUserAnswer] = useState(null);

  // ... 组件的其他部分
}

npm install classnames
# 或者
yarn add classnames

import React, { useState } from 'react';
import classNames from 'classnames'; // 引入 classnames 工具库

// ... 其他常量和函数定义

const renderMajorSegment = (musicKey, index, userAnswer) => { // 传递 userAnswer 作为 prop
  let arc = calculateArc(outerRadius, innerRadius, musicKey.segmentMetadata.startAngle, musicKey.segmentMetadata.endAngle);
  let [arcCenterX, arcCenterY] = arc.centroid();

  // 使用 classnames 工具库动态生成类名
  const segmentClasses = classNames(
    'circle-segment', // 基础类名
    { 'isVisible': musicKey.segmentMetadata.majorCircle.isVisible }, // 条件类名：isVisible
    { 'correctAnswer': userAnswer === CORRECT }, // 条件类名：correctAnswer
    { 'wrongAnswer': userAnswer === WRONG }    // 条件类名：wrongAnswer
  );

  return (
    <g className={segmentClasses} key={index}>
      <path
        d={arc.apply()} // apply() is needed to generate the string that goes into the 'd' attribute
      />
      <text x={arcCenterX} y={arcCenterY} transform={`rotate(15, ${arcCenterX}, ${arcCenterY})`}>
        {abbreviateKeyFromChord(musicKey.chords[0])}
      </text>
    </g>
  );
};

function YourGameComponent() {
  // ... 其他状态和常量

  const [userAnswer, setUserAnswer] = useState(null); // 定义 userAnswer 状态

  const handleUserInput = (event) => {
    var index;
    if (hiddenSegment.major) {
      index = 0;
    } else {
      index = 5;
    }

    if (event.key === 'Enter') {
      if (event.target.value === abbreviateKeyFromChord(hiddenSegment.chords[index])) {
        console.log('CORRECT');
        // 设置正确状态
        setUserAnswer(CORRECT);

        // 可选：延迟一段时间后重置状态或开始下一轮，以便用户看到反馈
        setTimeout(() => {
          // 在这里重置 userAnswer 为 null，或者调用 startRound() 来重置游戏状态
          setUserAnswer(null);
          startRound();
        }, 1000); // 例如，1秒后重置并开始下一轮
      } else {
        console.log('WRONG');
        // 设置错误状态
        setUserAnswer(WRONG);

        // 可选：延迟一段时间后重置状态
        setTimeout(() => {
          setUserAnswer(null);
          // 可以在这里添加重试逻辑或提示
        }, 1000);
      }
    }
  };

  return (
    <div className='circle-of-fifths-container'>
      <svg
        height={diameter*1.1}
        width={diameter*1.1}>
        <g className='circle-container' transform={`translate(${diameter/2 + 25},${diameter/2 + 25}) rotate(-15)`}>
          <circle r={outerRadius} className='base-circle'/>
          <g className='outer-circle-segments-container'>
            {/* 将 userAnswer 状态传递给 renderMajorSegment */}
            {musicKeysObject.map((musicKey, index) => renderMajorSegment(musicKey, index, userAnswer))}
          </g>
          <g className='inner-circle-segments-container'>
            {/* 假设 renderMinorSegment 也需要类似逻辑，同样传递 userAnswer */}
            {musicKeysObject.map((musicKey, index) => renderMinorSegment(musicKey, index, userAnswer))}
          </g>
          {/* ... 其他组件内容 */}
        </g>
      </svg>
      {mode === PLAYING &&
        <input placeholder='Your answer' onKeyDown={handleUserInput}></input>
      }
    </div>
  );
}