Как предоставить родительскому компоненту React доступ к дочернему состоянию без формы (с песочницей)? - PullRequest
Новая
       11

Как предоставить родительскому компоненту React доступ к дочернему состоянию без формы (с песочницей)?

0 голосов
/ 09 апреля 2019

В настоящее время я ищу способ доступа к дочерним элементам state из родительского компонента, который будет обрабатывать вызовы API для всей страницы.

Фактическая проблема заключается в следующем:

Parent является родительским компонентом, который будет отображать два Child компонента.

Каждый из Child имеет состояние, за которое он отвечает.

Кнопка «Вид отправки»будет иметь «Вид действия Submmit» (это все указано, потому что это не форма), и это должно вызывать функцию для предоставления доступа к состоянию детей.Есть ли способ (некоторая особенность React) сделать это без использования <form> или без создания промежуточного родительского компонента для хранения всего состояния?Я хочу, чтобы каждый ребенок отвечал за свое государство.

Код Песочница с примером кода ниже 

import React, { useState, useRef } from "react";

function ChildOne() {
  const [childOneState, setChildOneState] = useState(false);

  return (
    <React.Fragment>
      <h3>Child One</h3>
      <p>My state is: {childOneState.toString()}</p>
      <button onClick={() => setChildOneState(true)}>Change my state</button>
    </React.Fragment>
  );
}

function ChildTwo() {
  const [childTwoState, setChildTwoState] = useState(false);

  return (
    <React.Fragment>
      <h3>Child Two</h3>
      <p>My state is: {childTwoState.toString()}</p>
      <button onClick={() => setChildTwoState(true)}>Change my state</button>
    </React.Fragment>
  );
}

function Button(props) {
  return (
    <button onClick={props.kindOfSubmitAction}>Kind of Submit Button</button>
  );
}

function Parent() {
  const childOneState = useRef("i have no idea");
  const childTwoState = useRef("ihave no idea");

  function kindOfSubmitAction() {
    console.log("This is the kindOfSubmit function!");
    // This function would somehow get
    // access to the children state and store them into the refs
    return;
  }

  return (
    <React.Fragment>
      <h1>Iam Parent</h1>
      <div>
        <b>Child one state is: </b>
        {childOneState.current}
      </div>
      <div>
        <b>Child two state is: </b>
        {childTwoState.current}{" "}
      </div>

      <Button kindOfSubmitAction={kindOfSubmitAction} />

      <ChildOne />
      <ChildTwo />

    </React.Fragment>
  );
}

export default Parent;

1 Ответ

2 голосов
/ 10 апреля 2019

Когда нескольким компонентам требуется доступ к одним и тем же данным, наступает время для Upting State Up .

...