Изменить дочернее состояние от родительского

Мы можем изменить переменную состояния дочернего компонента из родительского компонента, используя концепцию ref.

  1. сначала создайте родительский компонент

класс Parrent расширяет React.Component {

конструктор (реквизит) {

супер (реквизит);

}

оказывать() {

возвращение (

‹див›

‹/дел›

);

}}

2. Теперь создайте дочерний компонент

класс Child расширяет React.Component {

состояние = {

Название: Бэтмен

};

оказывать() {

вернуть ‹div›{this.state.name}‹/div›;

}}

3. После создания дочерней композиции импортируйте дочерний компонент в родительский компонент. после этого код нашего родительского компонента:

класс Parrent расширяет React.Component {

конструктор (реквизит) {

супер (реквизит);

}

оказывать() {

возвращение (

‹div›
‹Ребенок /›

‹/дел›

);

}}

4. Следующий шаг — создать ссылку в родительском компоненте для дочернего компонента.

класс Parrent расширяет React.Component {

конструктор (реквизит) {

super(props);
this.childRef = React.createRef();

}

оказывать() {

возвращение (

‹div›
‹Дочерняя ссылка={this.childRef} /›

‹/дел›

);

}}

5. Теперь создайте кнопку в родительском компоненте. Нажав на эту кнопку, мы можем изменить состояние дочернего компонента из родительского компонента, используя ссылку реакции.

класс Parrent расширяет React.Component {

конструктор (реквизит) {

super(props);
this.childRef = React.createRef();

}
handleClick = () =› {

this.childRef.current.setState({ name: Whatever you want})

}

оказывать() {

возвращение (

‹div›
‹Child ref={this.childRef} /›
‹button onClick={this.handleClick}›Показать настоящее имя‹/button›

‹/дел›

);

}}

См. также:  Создайте календарь с помощью Angular и Bootstrap
Понравилась статья? Поделиться с друзьями:
IT Шеф
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: