Невозможно переключить класс на onClick в React

Question

Я пытаюсь узнать, как использовать формы в React.

Это форма с вариантами выбора.

В событии onclick тег span с щелчком мыши должен изменить цвет фона (только для того, чтобы показать, что на него щелкнули), я могу добиться этого для одного тега, но для нескольких тегов, если я нажму на один диапазон bg, цвет обоих тегов изменится.

Код:

import React from "react";

class MyForm extends React.Component {
constructor(props) {
super(props);
this.state = {
  userClick: true
};
this.handleChange = this.handleChange.bind(this);
this.handleChange1 = this.handleChange1.bind(this);
}

 handleChange(e) {
  alert(`You selected... ${e.target.textContent}`);
  this.setState({
  userClick: !this.state.userClick
  });
}

handleChange1(e) {
  alert(`You selected... ${e.target.textContent}`);
 this.setState({
  userClick: !this.state.userClick
  });
}

render() {
return (
  <div className="form-mode">
    <h6>Services:</h6>
    <div className="spans">
      <span
        onClick={this.handleChange}
        className={this.state.userClick ? "youClicked" : "unClicked"}
      >
        {" "}
        inPerson{" "}
      </span>
      <span onClick={this.handleChange1} className={this.state.userClick ? "youClicked" : "unClicked"}> Virtual</span>
    </div>
  </div>
  );
}
}

 export default MyForm;

Answer 1

Обе функции при нажатии изменяют одну и ту же переменную состояния, userClick. Если вы хотите, чтобы 2 пролета действовали независимо, вам понадобятся две переменные состояния, например:

handleChange(e) {
  alert(`You selected... ${e.target.textContent}`);
  this.setState({
     firstSpanClick: !this.state.firstSpanClick
  });
}

handleChange1(e) {
  alert(`You selected... ${e.target.textContent}`);
  this.setState({
     secondSpanClick: !this.state.secondSpanClick
  });
}

<span onClick={this.handleChange1} className={this.state.firstSpanClick ? "youClicked" : "unClicked"}> Virtual</span>

<span onClick={this.handleChange2} className={this.state.secondSpanClick ? "youClicked" : "unClicked"}> Virtual</span>

Более чистым способом достижения того же результата было бы присвоение имен отрезкам с одним handleChange.

//Each toggle variable doesn't need to be initialised, this is just for demonstration.

this.state = {
   spanOne: false,
   spanTwo: false
}

handleChange = (e) => {
        let name = e.target.getAttribute('name');
        this.setState({
            [name]: !this.state[name]
        });
    };

<span onClick={this.handleChange} name={'spanOne'} className={this.state.spanOne ? "youClicked" : "unClicked"}> Virtual</span>

<span onClick={this.handleChange} name={'spanTwo'} className={this.state.spanTwo ? "youClicked" : "unClicked"}> Virtual</span>