javascript - 从孩子到父母的状态

Question

我如何从孩子那里获得状态，以便父母认识到孩子的状态已经改变？

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

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

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

Answer 1

我想我会做这样的事情：

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>;
}

Answer 2

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>
   );
};

当您需要将状态保留在父级并在子级内部进行修改时，无论子级如何。您从定义为修改状态的父级的 props 中传递一个处理程序。子执行此处理程序。

这种模式称为状态提升。

Answer 3

您可以使用功能组件执行以下操作。编写子组件如下：

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;

在 App.js 中使用 GrandParent 组件如下：

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;

Answer 4

你可以这样做：

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状态更新

Answer 5

您可以为子添加道具并在每次更改状态时调用 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>
   )};