Реакция - изменение состояния одной кнопки из массива 100 кнопок и сброс состояния всех кнопок одним нажатием - PullRequest
Новая
       8

Реакция - изменение состояния одной кнопки из массива 100 кнопок и сброс состояния всех кнопок одним нажатием

1 голос
/ 04 апреля 2020

Итак, у меня есть 100 сопоставленных кнопок из массива, что-то вроде этого 

        {
          buttons.map((button, index) =>
            <StyledGameButton
              key={index}
              value={button}
              onClick={this.checkButton}>
              { button < 10 ? `0${button}` : button }
            </StyledGameButton>
          )
        }

Я хочу, чтобы пользователь нажимал все кнопки от 0 до 99, поэтому, когда он нажимает, например, 0, кнопка должна изменить цвет , Я сделал проверку функции, нажал ли он правильную кнопку, и если да, то я добавляю data-attr к этой кнопке (так я меняю цвет кнопок): 

  checkButton = e => {
    const buttonId = e.currentTarget.getAttribute('value');
    const nextButton = this.state.currentButton === null ? 0 : this.state.currentButton + 1;
    if (buttonId == nextButton){
      this.setState({
        currentButton: parseInt(buttonId),
      });
      if (this.state.currentButton === 99) {
        this.gameEnd();
      };
      e.currentTarget.setAttribute('data-status', 'correct');
    }
  }

Проблема в том, что я хочу чтобы сделать кнопку сброса, все кнопки будут «не нажаты», поэтому я должен удалить data-attr из всех кнопок одним щелчком мыши. Как я могу это сделать? Или есть лучшее решение для управления «состоянием» одной кнопки без создания 100 состояний?

1 Ответ

1 голос
/ 04 апреля 2020

100 checkboxes demo

использовать массив для хранения состояния будет хорошо. 

const list = [...Array(100).keys()].map(x => ({ id: x }));
const App = () => {
  const [selected, setSelected] = React.useState([]); // init with empty list
  const onChangeHandler = id => () => {               // pass index/identify params
    selected.includes(id)                             // check whether been checked
      ? setSelected(selected.filter(x => x !== id))   // yes, remove
      : setSelected([...selected, id]);               // no, add
  };
  const onRemove = () => {
    setSelected([]);                                  // remove all, set to empty list
  };
  return (
    <div className="App">
      {list.map(item => (
        <input
          type="checkbox"
          key={item.id}
          checked={selected.includes(item.id)}
          onChange={onChangeHandler(item.id)}
        />
      ))}
      <br />
      <button onClick={onRemove}>Remove all</button>
      <div>{selected.join(",")}</div>
    </div>
  );
}
ReactDOM.render(<App />, document.getElementById("root"));
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>
...