Получение состояния от ребенка к родителю - PullRequest
Новая
       7

Получение состояния от ребенка к родителю

0 голосов
/ 08 апреля 2020

как бы получить состояние от ребенка, чтобы родитель узнал, что состояние этого ребенка изменилось? 

const grandParent = () => (
 <parent>
   <child/>
 </parent>
);

const child = () => {
 const [isOpen, setOpen] = useState(false)

  return (
    <button onClick={()=>setOpen(!isOpen)}>Open</button>
 )};

Ответы [ 5 ]

0 голосов
/ 08 апреля 2020

Вы можете сделать следующее, используя функциональный компонент. Запишите дочерний компонент, как показано ниже: 

import React, {useEffect, useState} from 'react';

function Child(props) {
    const {setStatus} = props;
    const [isOpen, setOpen] = useState(false);

    function clickHandler() {
        setOpen(!isOpen);
        setStatus(`changes is ${!isOpen}`);
    }
    return (
        <div>
            <button onClick={clickHandler}>Open</button>
        </div>
    );
}
export default Child;

Напишите компонент GrandParent, как показано ниже: 

import React, {useEffect, useState} from 'react';
import Child from "./Child";

function GrandParent(props) {
    function setStatus(status) {
        console.log(status);
    }
    return (
        <div>
            <Child setStatus={setStatus}></Child>
        </div>
    );
}
export default GrandParent;

Используйте компонент GrandParent в приложении. js, как показано ниже: 

import React from "react";
import GrandParent from "./GrandParent";

class App extends React.Component {
  render() {
    return (
        <GrandParent/>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

export default App;
0 голосов
/ 08 апреля 2020

Думаю, я бы сделал что-то подобное: 

function GrandParent(){
  return <Parent />
}

function Parent() {
  const [isOpen, setOpen] = useState(false);

  const handleToggle = useCallback(() => {
    setOpen(!isOpen);
  }, [isOpen, setOpen]);


  return <Child handleToggle={handleToggle} />;
}

function Child(props) {

  return <button onClick={() => props.handleToggle()}>Open</button>;
}
0 голосов
/ 08 апреля 2020

Вы можете сделать что-то вроде этого: 

const grandParent = () => {
    const [isOpen, setOpen] = useState(false)
    return (
        <parent isOpen>
            <child isOpen onChangeState={() => setOpen(!isOpen)} />
        </parent>
    )
}

const child = (props) => {
    return (
        <button
            onClick={() => {
                props.onChangeState()
            }}>
            Open
        </button>
    )
}

Объяснение:

Вы управляете состоянием в компоненте grandParent и передаете его в компоненте parent (а также в child, если вам нужно).

У child есть реквизит, который вызывается при нажатии кнопки и приводит к обновлению состояния grandParent

0 голосов
/ 08 апреля 2020 
const grandParent = () => {
   const [ isOpen, setOpen ] = useState(false)

   return (
      <parent>
         <child onHandlerClick={ () => setOpen(!isOpen) }/>
      </parent>
   );
};

const child = (onHandlerClick) => {
    // Note I removed the local state. If you need the state of the parent in the child you can pass it as props. 

  return (
    <button onClick={ () => onHandlerClick() }>Open</button>
   );
};

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

Этот шаблон называется подъемом состояния.

0 голосов
/ 08 апреля 2020

Вы можете добавлять реквизиты для потомков и вызывать onChange каждый раз, когда изменяется состояние 

const grandParent = () => (
function handleChange() {}
   <parent>
      <child onChange={handleChange} />
   </parent>
);


const child = (props) => {
   const [isOpen, setOpen] = useState(false);
   function onChange() {
     setOpen(prevOpen => {
        props.onChange(!prevOpen);
        return !prevOpen;
     });
   }
   return (
      <button onClick={()=>setOpen(!isOpen)}>Open</button>
   )};
...