Question

我在代码中使用2 useState。当第2个useSate状态为true时，我希望将第一个useState状态设置为false。

我可以使用类组件而不是功能组件来实现它。

类组件代码

 class App extends React.Component {
 state = { visible: false, childrenDrawer: false };

showDrawer = () => {
this.setState({
  visible: true,
});
};

onClose = () => {
this.setState({
  visible: false,
});
};

showChildrenDrawer = () => {
this.setState({
  childrenDrawer: true,
  visible: false, //**this make 1st state status false when 2nd state is true**
});
};

onChildrenDrawerClose = () => {
this.setState({
  childrenDrawer: false,
});
};

如何在功能组件中实现此目标，请指导

 const [visible, setVisible] = useState(false);
 const [hideAuto, setAuto]= useState(false);

 const showDrawer = () => {
 setVisible(true);
 };

const onClose = () => {
setVisible(false);
};

const Quality=()=>{
setAuto(true);
}

const Selection = () => {
setVisible(false);
};

Answer 1

您可以像使用类一样使用React钩子在函数组件中初始化和更新状态。

在您的功能组件中，为什么要使用两个单独的钩子？为什么不像在课堂上那样跟踪状态呢？使用单个对象。例如：

let [myState, updateMyState] = useState({ visible: false, childrenDrawer: false });

然后更新状态：

updateMyState(...myState, visible: true) // show drawer for example

Answer 2

如何进行简单的设置，将传递更改父状态的函数作为道具传递给子组件：

const parentDrawer = () => {
    const [parentState, setParentState] = useState(true);
    const onChildClose = () => {
        setParentState(false)
    }
    return <childDrawer onChildClose={onChildClose} />
}

const childDrawer = ({ onChildClose }) => {
    const onChildInteraction = () => {
        onChildClose()
    }
    return (...)
}

这涵盖了由父代渲染/返回子代的情况。如果您单独使用它们，则可能要考虑上下文。

如何使用功能组件反应更新父状态

2 个答案: