Как изменить состояние во всех экземплярах компонента React?

Question

[Максим Золотой]

Только начал изучать реакт. Есть компонент кнопки и на старнице может быть много таких кнопок. Как при клике на любую из кнопок изменить state во всех экземплярах этого компонента? this.setState работает только на той кнопке которую нажал

Answer 1

[askhat]

Для этого каждому экземпляру нужно передать ссылку на одно значение

class Buttons extends Component {
  state = {
    foo: 'bar'
  }

  changeText = () => {
    if (this.state.foo === 'bar') {
      this.setState({ foo: 'foo' })
    } else {
      this.setState({ foo: 'bar' })
    }
  }     

  render() {
    return (
      <Button text={this.foo} />
      <Button text={this.foo} />
      <Button text={this.foo} />
      <Button text={'Изменить текст'} onClick={this.changeText} />
    )
  }
}

Пример глупый, но принцип иллюстрирует.