Как получить состояние от нескольких дочерних компонентов к родительскому для обработки без использования Redux - PullRequest
Новая
       26

Как получить состояние от нескольких дочерних компонентов к родительскому для обработки без использования Redux

0 голосов
/ 31 мая 2019

У меня есть родительский элемент, который включает три дочерних компонента в виде вкладок, родительский элемент также содержит кнопку, которая обрабатывает запрос POST после получения всех состояний всех трех дочерних компонентов.Как извлечь все состояния из трех дочерних компонентов обратно в родительский для обработки после нажатия кнопки в родительском элементе?

Я не хочу использовать Redux, поскольку это сложно для меня, даже если у меня естьпросмотрел несколько видео и узнал из разных источников

Ответы [ 2 ]

0 голосов
/ 31 мая 2019

Вы можете использовать refs для извлечения состояния из дочерних компонентов https://reactjs.org/docs/refs-and-the-dom.html

constroctor() {
 super()
 this.tab1 = React.createRef()
 this.tab2 = React.createRef()
 this.tab3 = React.createRef()
}

handleSomeAction = () => {
  console.log(this.tab1.current.state)

  // this method require to create method getState = () => this.state in Tab component 
  console.log(this.tab1.current.getState())
}

<Tabs onClick={this.handleSomeAction}>
 <Tab ref={this.tab1}>
 <Tab ref={this.tab2}>
 <Tab ref={this.tab3}>
</Tabs>

Вы можете добавить обработчик handleSomeAction на кнопку вместо компонента Tabs

0 голосов
/ 31 мая 2019

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

import React, { Component } from 'react';
import { View } from 'react-native';

class ParentComponent extends Component {

  state = {
    child1: 0,
    child2: 0,
    child3: 0,
  };

  settingState = (key, val) => {
    this.setState(state => ({
      ...state,
      [key]: val,
    }));
  };

  render() {
    const { child1, child2, child3 } = this.state;
    return (
      <View>
        <ChildOne child1={child1} settingState={this.settingState} />
        <ChildTwo child2={child2} settingState={this.settingState} />
        <ChildThree child3={child3} settingState={this.settingState} />
      </View>
    );
  }
}

export default ParentComponent;

Таким образом, вы устанавливаете состояниеот родителя и иметь доступ к нему в любое время.Насколько я знаю, вы не сможете получить доступ к состоянию ребенка.

...