更改按钮状态后如何防止在反应开关按钮中重新渲染

Question

我有一个文本字段，其默认状态为 false，并且该文本字段被禁用。在我单击反应开关按钮后，我的文本字段已启用，并且其状态更改为 true。但是在我浏览另一个页面并返回上一页后，我的 tex 字段再次被禁用，其状态设置为 false。但我不需要那个。转到另一个页面后，我需要停止重新渲染我的开关和文本字段。我怎样才能做到这一点...？ 如果你能帮助我..这意味着很多。谢谢。

//Switch State
const [openSwitch, setOpenSwitch] = useState({
    checkedA: true,
    checkedB: false,
});

//Text field state
const [disable, setDisable] = useState(true);


// Switch Handler
const switchHandler = (event) => {
    setOpenSwitch({...openSwitch, [event.target.name]: 
event.target.checked});
    setDisable(!disable);
};


//Switch function
        <Switch
             checked={openSwitch.checkedB}
             onChange={switchHandler}
             color="primary"
             name="checkedB"
             inputProps={{'aria-label': 'primary checkbox'}}
          />

//Text field
   <Autocomplete 
     disabled={disable}
    >
  </Autocomplete>

这是默认设置：

这是我返回另一个页面后需要设置的方式：

Answer 1

这不是通过在页面之间移动来重新渲染您的组件将再次安装和卸载的问题。当您移回页面时，就像呈现了一个新组件，并且在新组件中，您的默认禁用状态为 false。

有多种方法可以解决此问题，您可以将状态管理器传递到启动路由的位置，例如应用组件：

const App = () => {
    const [inputDisable, setInputDisable] = useState(false);
    
    ...

    return (
        ...
            <YourComponent disable={inputDisable} setDisable={setInputDisable}/>
        ...
    );
};

但这不是一个好习惯。您可以使用 React Context 来解决您的问题，也可以使用 Redux 等状态管理库。这些是更好的方法，我建议同时学习它们

Answer 2

为功能组件存储全局状态的最简单和标准的方法是使用上下文。

https://reactjs.org/docs/context.html