Reactjs 登录模式'；国家直播？

是否打开模式：如果页面中有多个按钮可能打开同一登录模式，那么存储其状态的合理位置在哪里？如果标题、主页和第二页都有一个登录按钮，那么它们的共同祖先就是App.js。我小心翼翼地把国家放在那里

---

我缺少什么吗？

您可以使用或存储身份验证共享状态，例如

{isUserLoggedIn:boolean，isLoginModalOpen:boolean}

并通过在应用程序中的任何位置调度操作（如

打开登录模式

或

关闭登录模式

）来操纵状态。

状态应位于父组件上，该组件包含模式。例如，此父组件跟踪打开和关闭模态组件。然后我可以通过道具将数据传递给模态。我的模态只是一个功能组件，因为它不需要存储状态

class EwdsUserRow extends React.PureComponent {   
    constructor(props) {
      super(props);
  this.state = {
      modalOpen: false, 
        close: false
     };
     _openModal() { 
     this.setState({modalOpen: true, close: true});
     }  
     _closeModal() {
         this.setState({modalOpen: false, close: true});
     }
     …
     <td>
          <button className="btn btn-md btn-primary" onClick={this._openModal.bind(this)}>Edit</button>        
           {this.state.modalOpen 
            ? <Modal data={this.props.ewdsUser} onUpdate={this.changeData} closeModal={this._closeModal.bind(this)}
               submitUrl={'/ewds_app/ewdsusers/edit'} spin={false} />
           : ''}
        </td>   

类EwdsUserRow扩展了React.PureComponent{
建造师（道具）{
超级（道具）；
此.state={
莫达洛彭：错，
关闭：错误
};
_OpenModel（）{
this.setState（{modalOpen:true，close:true}）；
}  
_closeModal（）{
this.setState（{modalOpen:false，close:true}）；
}
…
编辑
{this.state.modalOpen
? 
: ''}

您想在状态中存储什么？是字段中输入的值吗？然后您应该创建一个单独的组件来管理自己的状态，并在需要的任何地方重复使用。编辑问题以澄清。我指的是状态布尔值，它决定模式是否打开。我的第一次尝试是使用

本地存储

。例如，当窗体打开时：

localStorage.setItem（'loginModalOpen'，true）

。使用

open={localStorage.getItem（'loginModalOpen'）==='true'}

检查模式打开状态，当然，当它仅关闭时，

localStorage.removietem（'loginModalOpen'））

@curiousdev，很遗憾，当localStorage状态更改后，您无法侦听localStorage并更改登录模式视图状态。@Emech啊，是的，您是对的！