Реактивная викторина> Сброс стиля до события Цель - PullRequest
Новая
       9

Реактивная викторина> Сброс стиля до события Цель

0 голосов
/ 15 апреля 2020

Скажем, у меня есть тест с четырьмя предметами, пользователь должен выбрать один, у меня есть три стиля (нейтральный, правильный и неправильный)

Например, если правильный ответ «пункт 2», как я могу сбросить стиль кликаемого элемента?

Попытка здесь: https://codesandbox.io/s/react-state-async-example-fixed-vx19s?file= / src / index. js

import React from "react";
import { render } from "react-dom";
import "./styles.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.resetQuiz = this.resetQuiz.bind(this);

    this.state = {
      itemStyle: ["neutral", "right", "wrong"],
      itemsQuizz: ["item 1", "item 2", "item 3", "item 4"]
    };
  }

  handleChange(idx, event) {
    console.log(idx);
    let correctAnswer = 2;
    if (idx === correctAnswer) {
      event.target.className = "right";
    } else {
      event.target.className = "wrong";
    }
  }

  resetQuiz() {
    let neutralStyle = this.state.itemStyle[0];
    this.setState({
      itemStyle: neutralStyle
    });
  }

  render() {
    return (
      <div>
        <h1>Quizz</h1>
        <div className="container">
          {this.state.itemsQuizz.map((item, idx) => (
            <button
              className={this.state.itemStyle[0]}
              onClick={this.handleChange.bind(this, idx)}
              key={idx}
            >
              {item}
            </button>
          ))}
        </div>
        <button onClick={this.resetQuiz}>Reset</button>
      </div>
    );
  }
}
render(<App />, document.getElementById("root"));
...