Как изменить состояние родителя из дочернего компонента React?

Question

[Максим Калинин]

Передаю состояние родителя в дочерний компонент: <Component openModal={this.state.openModal} />

Далее в дочернем компоненте есть элемент по клику на который вызывается метод, который должен изменить состояние родителя на true.
Как это сделать?

Answer 1

[Gary_Ihar]

1) создайте обработчик в родительской компоненте, который будет менять стейт.
2) передайте обработчик в дочернюю компоненту.
3) используйте обработчик в дочерней компоненте и меняйте Стейт в родительской компоненте.

Comments

[Максим Калинин]

Не понимаю как реализовать 2 и 3 пункт.
Собственно обработчик:

openModal = () => {this.setState({openModal: true})}

Также в родителе у меня привязка:
this.openModal = this.openModal.bind(this);
Передаю в компонент так:<Component openModal={this.openModal} />

Далее в компоненте кнопка, по нажатию на которую я пытаюсь вызвать родительский метод:
<button onClick={this.props.openModal}/>

Но я явно делаю что-то не правильно

[Gary_Ihar]

Максим Калинин, родитель:

state = {
    value: true,
  };
 onClick = () => {
    this.setState({ value: !this.state.value });
  };
<Component click={this.onClick} />

Дочерний компонент:

const test = ({ click }) => {
  return (
    <div>
      <button onClick={click}>click</button>
    </div>
  );
};

Answer 2

[8XL]

Верное решение подсказали, слегка разберу для понимания.

<Parent>
  <Children openModal={this.state.openModal} onChange={this.onChange} />
<Parent />

в Parent объявите метод

onChange=()=>{
  this.setState({openModal : true})
}

В Children так

<div onClick={this.props.onChange}>
  ...какие-то элементы...
</div>

Всё просто)

Но еще проще и гораздо надежнее https://ru.reactjs.org/docs/lifting-state-up.html

Comments

[Максим Калинин]

Вроде как всё сделал. Но состояние не меняется.
App.js:

class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      openModal: false
    }
    this.onChange = this.onChange.bind(this);
  }

  onChange = () => {
    this.setState({openModal: true});
  }
  render(){
    return (
      <div className="wrapper">
        <Header />
        <Content onChange={this.onChange} openModal={this.state.openModal}/>
        <Modal openModal={this.state.openModal}/>
      </div>
    );
  }
}

Content.js:

class Service extends React.Component {
  constructor(props){
    super(props);
  }

  render() {
    return (
      <li className="services__item" onClick={this.props.onChange}>
        {this.props.name}
      </li>
    );
  }
}

Modal.js:

class Modal extends React.Component{

    constructor(props){
        super(props);
    }

    render(){
        return(
           <div>
                {this.props.openModal && ...}
           </div>
        );
    }
}

[8XL]

e.preventDefault() пробовали в onChange?

И у вас родитель рендерит Content , куда вы и передаете метод, в то время как сам метод вы применяете в компоненте Service

[Максим Калинин]

8 XL, пока что не пробовал.
Хотите сказать из-за того что я вызываю метод в компоненте Service у меня все и не работает?

У меня контент - вся контентная часть. Там собственно все компоненты. Кнопки, формы, и прочее. И вот Service - это элемент списка, по нажатии на который должно открываться модельное окно.
Модельное окно собственно Modal у меня также рендерит App.js на равне с шапкой и контентом страницы, чтобы модалкой при ее открытии я смог перекрыть все содержимое страницы.

[8XL]

Максим Калинин, предполагаю, что либо вы не в тот компонент передали метод, либо e.preventDefault()(но тут я слегка сомневаюсь, ибо этот метод больше для кнопок)

Если первое - ваша задача передать метод именно в тот компонент, в котором он вызывается,
если же второе, то это будет несколько странно.

[8XL]

8 XL, В общем, если я верно понял, то примерно все выглядит вот так:

<App>
  <Header />
  <Content>   --вы, предположительно, передаете сюда
    <Service />   --а нужно вот сюда
  </Content>
</App>

Так же, для удобства и наглядности, рекомендую ознакомиться https://ru.reactjs.org/docs/composition-vs-inherit...

Answer 3

[Михаил]

<Component openModal={this.state.openModal} onChange={this.onChange} />

Answer 4

[Kirill Makarov]

Помимо состояния еще и функцию из родителя туда прокинь