Как поменять состояние у другого компонента в React?
читаем эту статью
https://qna.habr.com/q/495147
Также оригинал документации тут
https://reactjs.org/docs/lifting-state-up.html
Если кратко, если не использовать mobx или редукс надо
в родительском компоненте общим для всех взаимодействий сделать общее состоенияе и передать его вглубь по компонентам реакта.
|
1 2 3 4 5 6 |
state = { isChecked: false, } handleInputChange = event => { this.setState({ isChecked: event.target.checked }) } |
в html засовывает такое
|
1 2 3 4 |
<Form handleInputChange={this.handleInputChange} isChecked={this.state.isChecked} /> |
handleInputChange — передается вглубь по древу компонентов
А теперь глянем, на нижнее звено, куда передалось это все
|
1 2 3 4 5 6 7 8 9 10 11 |
import React from 'react'; const Form = ({ isChecked, handleInputChange }) => ( <input type="checkbox" checked={isChecked} onChange={handleInputChange} /> ) export default Form; |
видим что handleInputChange — передалось как параметр в замыкании.
Замыкание — эта строка ({ isChecked, handleInputChange }) , т.е при вызове из верхнего компонента мы замкнули эти элементы и теперь в нижний компонент все передалось.
