Question

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

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

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

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

Answer 1

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

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

此模式称为状态提升。

Answer 2

我想我会做这样的事情：

wait

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

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

Answer 5

您可以执行以下操作：

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

从孩子到父母的状态

5 个答案: