Javascript 比赛问答；有反应吗？

我有一套问题和一套答案。每个答案是一个问题的唯一正确答案。单击时，我需要突出显示正确选择的问题或答案

例如：

• 单击问题时，将该特定问题的类更改为“活动”（因此css会更改）
• 单击答案时，将该特定答案的类更改为“活动”

以下是主页：

constructor(props) {
    super(props)
    this.handleQAClick = this.handleQAClick.bind(this)
    this.toggleColour = this.toggleColour.bind(this)

    this.state = {
        questions: [],
        active: true
    }
}

{this.state.questions.length
? (
{this.state.questions.map（问题=>(
))}
)
：（“未找到任何问题”）
}
{this.state.questions.length
? (
{this.state.questions.map（问题=>(
))}
)
：（“未找到任何问题”）
}

以下是MatchItem组件：

import React, {Component} from 'react'

export class MatchItem extends Component {
    render() {
        return (
            <div className={`match-item${this.props.active ? "-active" : ""}`} data-id={this.props.id} data-type={this.props.type} onClick={() => this.props.handleClick(this.props.id, this.props.type)}>
                {this.props.text}
            </div>
        )
    }
}

import React，{Component}来自“React”
导出类MatchItem扩展组件{
render（）{
返回(
this.props.handleClick（this.props.id，this.props.type）}>
{this.props.text}
)
}
}

一种方法是：

• 为每张卡分配一个唯一的id（问题）
• 这样换班

• 您可以通过以下方式管理状态：

  
  handleClick=（id）=>{
  这是我的国家({
  问题：身份证
  })
  }
  

<Card>
    {this.state.questions.length 
        ? (
            <List>
                {this.state.questions.map(question => (
                    <ListItem key={question._id}>
                        <MatchItem
                            id={question._id}
                            type="question"
                            active={this.state.active}
                            text={question.question}
                            handleClick={this.handleQAClick}
                        />
                    </ListItem>
                ))}
            </List>
        )
        : ('No questions found')                        
    }
</Card>
<Card>
    {this.state.questions.length 
        ? (
            <List>
                {this.state.questions.map(question => (
                    <ListItem key={question._id}>
                        <MatchItem
                            id={question._id}
                            type="answer"
                            text={question.option1}
                            handleClick={this.handleQAClick}
                        />
                    </ListItem>
                ))}
            </List>
        )
        : ('No questions found')                        
    }
</Card>

import React, {Component} from 'react'

export class MatchItem extends Component {
    render() {
        return (
            <div className={`match-item${this.props.active ? "-active" : ""}`} data-id={this.props.id} data-type={this.props.type} onClick={() => this.props.handleClick(this.props.id, this.props.type)}>
                {this.props.text}
            </div>
        )
    }
}