Изменить переменную (состояние) из дочернего компонента
Допустим есть дочерний компонент, который должен изменять состояние родительского компонента. Это можно реализовать создав метод в родительском компоненте, и передав его как пропс дочернему компоненту.
// Родительский класс class App extends React.Component { constructor(props) { super(props); this.state = {count: 0}; this.handleCountPlus = this.handleCountPlus.bind(this); } // Метод, который будет передан дочернему компоненту handleCountPlus(count) { this.setState({count: count+1}); } render() { return ( <div> <Counter onCountPlus={this.handleCountPlus} count={this.state.count} /> {this.state.count} </div> ); } }
И сам код в дочернем компонене
class Counter extends React.Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); } // Выполнение метода родительского компонента handleChange(e) { this.props.onCountPlus(this.props.count); } render() { return ( <div> <button onClick={this.handleChange}>Прибавить</button> </div> ) } }
Данный механизм, в котором в дочернем компоненте можно изменять состояние родительского компонента, называется подъём состояния.
Поддержать автора