Как поменять состояние у другого компонента в React?

Question

[trybr]

Добрый вечер.

Есть компонент 1, который выводит элементы, с чекбоксами.
У чекбокса соответственно есть состояние: checked: false.

Есть компонент 2, который содержит в себе кнопку, по клику на которую необходимо менять состояние у компонента 1 с чекбоксами.

Возникает вопрос, каким образом изменить из первого компонента, состояние второго компонента, чтобы выделить все элементы с чекбоксами разом?

Если я всё правильно понял, то при смене состояния, опять произойдет рендер и чекбоксы уже будут с checked: true.

Comments

[Илья Герасимов]

В реакте компоненты обернуты в кучи контейнеров, сообщайте контейнеру что-то, тот пусть сообщит это другим компонентам или используйте redux

[trybr]

Илья Герасимов, да я уже думал про redux, думал стандартными какими-нибудь способами возможно всё это сделать. Ладно, использую redux. Спасибо!

Answer 1

[Александр Чернокондратенко]

Вам необходимо поднять состояния от детей до общего родителя
Ссылка на документацию: https://reactjs.org/docs/lifting-state-up.html

App.js

import React, { Component } from 'react';
import Form from './Form';
import Button from './Button';

class App extends Component {
  state = {
    isChecked: false,
  }
  handleInputChange = event => {
    this.setState({ isChecked: event.target.checked })
  }
  handleButtonClick = () => {
    this.setState({ isChecked: !this.state.isChecked })
  }
  render() {
    return (
      <div className="App">
        <Form
          handleInputChange={this.handleInputChange}
          isChecked={this.state.isChecked}
          />
        <Button handleButtonClick={this.handleButtonClick}/>  
      </div>
    );
  }
}

export default App;

Button.jsx

import React from 'react';

const Button = ({ handleButtonClick }) => (
  <div>
    <button onClick={handleButtonClick}>
      clickme
    </button>
  </div>
)

export default Button;

Form.jsx

import React from 'react';

const Form = ({ isChecked, handleInputChange }) => (
    <input
        type="checkbox"
        checked={isChecked}
        onChange={handleInputChange}
    />
)

export default Form;