Счетчик реагирующих кликов: обновление состояния только одного элемента - PullRequest
Новая
       2

Счетчик реагирующих кликов: обновление состояния только одного элемента

0 голосов
/ 18 февраля 2020

Это должно быть довольно просто, но я не могу понять, как это сделать.

У меня есть компонент с несколькими кнопками, каждая со значением "count", установленным с состоянием. Когда пользователь нажимает, счет увеличивается.

Прямо сейчас, когда я нажимаю одну из кнопок, оба счетчика меняются. Как я могу сделать так, чтобы обновлялся только div, по которому щелкали, используя то же состояние?

Редактировать: Я не хочу иметь различное количество, так как я хотел бы, чтобы этот компонент отображал кнопки динамически. Что если я не знаю, сколько кнопок у меня будет сначала? 

class Block extends React.Component {
  state = {
    count: 0
  };

  handleClick = e => {
    const count = this.state.count;
    this.setState({ count: count + 1 });
  };

  render() {
    return (
      <div>
        <button className="block" onClick={this.handleClick}>
          <div className="counter">{this.state.count}</div>
        </button>
        <button className="block" onClick={this.handleClick}>
          <div className="counter">{this.state.count}</div>
        </button>
      </div>
    );
  }
}

Ответы [ 3 ]

3 голосов
/ 18 февраля 2020

Это больше вопрос обучения тому, как думать, реагировать.

Если вам необходимо повторно использовать часть функциональности, например, счетчик, вы можете сделать его собственным компонентом и управлять им в своем собственном состоянии. Затем вы можете использовать его везде, где вам нужно.

Вот пример: 

class Counter extends React.Component {
  state = {
    count: 0
  };

  handleClick = () => {
    // Unnecessary
    //const count = this.state.count;

    // Use updater function when new state is derived from old
    this.setState(prev => ({ count: prev.count + 1 }));
  };

  render() {
    return (
      <button className="block" onClick={this.handleClick}>
        <div className="counter">{this.state.count}</div>
      </button>
    );
  }
}

Затем вы можете использовать его динамически, как это: 

class Block extends React.Component {
  render() {
    return (
      <div>
        // Will render 4 counters that each manage their own state
        {[1,2,3,4].map(v => <Counter />)}
      </div>
    );
  }
}
1 голос
/ 19 февраля 2020

Если ваши кнопки динамические c, вы можете установить ваше состояние в виде массива и обновить соответствующий индекс 

class Block extends React.Component {
  state = [];

  handleClick = index => {
    this.setState(state => {
       const newState = [...state]; //keep state immutable
       !newState[index] && (newState[index] = 0)
       newState[index]++

       return newState
    });
  };

  render() {
    return (
      <div>
        {[1,2,3].map((value, index) => <button className="block" onClick={() => this.handleClick(index)}>
          <div className="counter">{this.state[index]}</div>
        </button>)}
      </div>
    );
  }
}
0 голосов
/ 19 февраля 2020

Вы должны определить два состояния, и при нажатии каждой кнопки обновлять текущее состояние, и вы можете отобразить текущее состояние в куполе следующим образом: 

state = {
  firstCount: 0,
  secondCount: 0
}

и написать свое действие (функцию) для обработки состояния обновления, например this 

handleUpdateCount = stateName => {
  this.setState({
    [stateName]= this.state[stateName] + 1
  })
}

тогда вы должны вызывать эту функцию следующим образом => 

this.handleUpdateCount('firstCount')
...