Question

我正在尝试使用状态将类添加到所选元素。我尝试了以下内容，但这将其添加到每个问题中，我只需要将其添加到正在回答的问题中即可。我正在使用React类组件和Redux。我还尝试过在外部map语句中传递索引，并将其添加到第二个map语句的索引值中，以查看是否会从当前问题中选择选项。

    return totalQuestions.map((q) => {                  
                return (
                    <div key={q.id} id={q.id}>
                        <h2 className={this.state.title}>{q.title}</h2>
                        <h3>{q.questionText}</h3>
                        <div key={q.id}>
                            {q.options.map((opt, index) => (
                                < div
                                    key={opt.id}
                                    val={opt.val}
                                    ref={this.options}                                  
                                    className={`${index === this.props.dataPersisted.clickedItem ? this.state.selected : ""} ${this.state.options}`}                                    >
                                    <div>
                                        <p onClick={this.handleClick.bind(this, index)}                                                                                     
                                            ref={this.correctRef}                                       
                                        >
                                            {opt.text}                                              
                                        </p>
                                    </div>
                                </div>
                            ))}
                        </div>

                        <PopUp
                            onRef={ref => (this.PopUp = ref)}
                            correct={this.state.correct}
                            pop={q.feedback}
                        />
                        <button
                            className={this.state.submit}
                            onClick={this.checkAnswer}
                            ref={this.checkAnsRef}
                        >
                            Check Answer
              </button>
                    </div >

Answer 1

每个问题应保留问题的选定元素数据，而不是单个this.props.dataPersisted.clickedItem。我已经创建了a working Plunker，请结帐例如：

className={`${index === this.props.dataPersisted[q.id]? this.state.selected : ""} ${this.state.options}`}>

将类添加到嵌套map语句中的当前（单击）元素

1 个答案: