单击的按钮的保存状态

Question

不确定如何执行此操作，但我试图保存被单击按钮的状态，默认情况下没有className，除非已单击

基本上我有这个组件

// This component renders buttons from an array inside of an object
<Question
          data={questions.find(q => q.id === currentQuestionId)}
          className={isActive ? 'active' : ''}
          handleClick={this.selectAnswer}
        />

data={questions.find(q => q.id === currentQuestionId)} // Based on current question Id, render out 
// buttons for specific questionId

按下按钮后，组件将重新呈现新的问题集并移至下一组问题，它还应采用“活动”样式

selectAnswer = answer => {
    this.setState(state => ({
      currentQuestionId: state.currentQuestionId + 1,
      userAnswers: state.userAnswers.concat([answer]),
      isActive: !state.isActive,
    }))
  }

我还有一个上一个按钮，仅当您的'currentQuestionId'大于1时才会显示（不会在第一个问题上显示上一个按钮）

{currentQuestionId > 1 && (
          <button type="button" onClick={this.previousQuestion}>
            Previous
          </button>
        )}

previousQuestion = () => {
    this.setState(state => ({
      currentQuestionId: state.currentQuestionId - 1,
    }))
  }

基本上，当previosQuestion触发时，我希望能够看到按下带有“活动” className的按钮。现在，我认为问题在于，当previousQuestion触发时，它将“ isActive”设置为false，如下所示：整个组件都在重新渲染

这里是整个应用程序的布局

class Survey extends Component {
  constructor(props) {
    super(props)
    this.state = {
      currentQuestionId: 1,
      userAnswers: [],
      isActive: false,
    }
    this.selectAnswer = this.selectAnswer.bind(this)
  }

  selectAnswer = answer => {
    this.setState(state => ({
      currentQuestionId: state.currentQuestionId + 1,
      userAnswers: state.userAnswers.concat([answer]),
      isActive: !state.isActive,
    }))
  }

  previousQuestion = () => {
    this.setState(state => ({
      currentQuestionId: state.currentQuestionId - 1,
    }))
  }

  render() {
    const { currentQuestionId, userAnswers, isActive } = this.state
    const { questions } = this.props
    return (
      <SurveyContainer>
        <Question
          data={questions.find(q => q.id === currentQuestionId)}
          className={isActive ? 'active' : ''}
          handleClick={this.selectAnswer}
        />
        {currentQuestionId > 1 && (
          <button type="button" onClick={this.previousQuestion}>
            Previous
          </button>
        )}

        {console.log('answers', userAnswers)}
        {console.log('questionId', currentQuestionId)}
      </SurveyContainer>
    )
  }
}