創建動態UI頭與反應，材料UI

Question

裏面我header.jsx文件我有：

// Default Import Statements go here 
var Login = require(login.jsx) 
const HeaderComponent = React.createClass({ 

    getInitialState() { 
    return { 
     loggedIn: false, 
    }; 
    }, 
    render() { 
    return (
     <Toolbar> 
     <ToolbarGroup key={1} float="right"> 
      <Login /> 
     </ToolbarGroup> 
     </Toolbar> 
    ); 
    } 
}); 

module.exports = HeaderComponent; 

我的登錄組件（login.jsx）內：

// Default Import Statements 

var LoginDialog = React.createClass({ 

    render() { 
    return (
     <div> 
     <Dialog 
      title="Login" 
      ref="loginDialog" 
      autoScrollBodyContent = {true} 
      onRequestClose={this._cancelTouchTap} 
      open={this.state.open}> 
      <form action="/login" method="post" autoComplete="off"> 
      <div> 
       <TextField hintText="Email Field" ref = "email" /> 
      </div> 
      <div> 
       <TextField hintText="Password" type="password" ref = "password"/> 
      </div> 
      <div> 
       <RaisedButton label="Submit" onTouchTap={this._submitTouchTap}/> 
       <RaisedButton label="Cancel" onTouchTap={this._cancelTouchTap}/> 
      </div> 
      </form> 
     </Dialog> 

     <FlatButton label="Login" style={loginSpacing} primary={true} onTouchTap={this._handleTouchTap} /> 

     </div> 
    ); 
    }, 

    _submitTouchTap: function(){ 
    var primaryEmail = this.refs.email.getValue(); 
    var password = this.refs.password.getValue(); 
    var data = { 
     primaryEmail: primaryEmail, 
     password: password 
    }; 
    $.ajax({ 
     url: '/login', 
     dataType: 'json', 
     type: 'post', 
     data: data, 
     success: function(data) { 
     console.log(data); 
     }.bind(this), 
     error: function(xhr, status, err) { 
     this.transitionTo('/login'); 
     }.bind(this) 
    }); 
    this.refs.loginDialog.setState({open: false}); 
    }, 

    _cancelTouchTap: function(){ 
    this.refs.loginDialog.setState({open: false}); 
    }, 

    _handleTouchTap() { 
    this.refs.loginDialog.setState({open: true}); 
    } 
}); 
module.exports = LoginDialog; 

我想當我的ajax調用在用戶登錄時返回成功時，將我的標頭的loggedIn狀態切換爲true。但是，我不太確定如何將數據從單獨的文件（child login.jsx）傳遞到我的父文件（header.jsx） 。有誰知道我可以做到這一點，所以我可以爲頭創建一個動態UI？

一旦用戶登錄到header組件中的loggedIn狀態應該返回true。一旦這是真的，我會顯示一個不同於當前顯示的標題。

Answer 1

您可以使用一個回調：

var Login = require(login.jsx) 
const HeaderComponent = React.createClass({ 

    getInitialState() { 
    return { 
     loggedIn: false, 
    }; 
    }, 
    render() { 
    return (
     <Toolbar> 
     <ToolbarGroup key={1} float="right"> 
      <Login onLoggedIn={this._handleLogIn}/> 
     </ToolbarGroup> 
     </Toolbar> 
    ); 
    }, 
    _handleLogIn: function (data) { 
    console.log(data); 
    this.setState({loggedIn: true}); 
    } 
}); 

module.exports = HeaderComponent; 

var LoginDialog = React.createClass({ 

    render() { 
    return (
     <div> 
     <Dialog 
      title="Login" 
      ref="loginDialog" 
      autoScrollBodyContent = {true} 
      onRequestClose={this._cancelTouchTap} 
      open={this.state.open}> 
      <form action="/login" method="post" autoComplete="off"> 
      <div> 
       <TextField hintText="Email Field" ref = "email" /> 
      </div> 
      <div> 
       <TextField hintText="Password" type="password" ref = "password"/> 
      </div> 
      <div> 
       <RaisedButton label="Submit" onTouchTap={this._submitTouchTap}/> 
       <RaisedButton label="Cancel" onTouchTap={this._cancelTouchTap}/> 
      </div> 
      </form> 
     </Dialog> 

     <FlatButton label="Login" style={loginSpacing} primary={true} onTouchTap={this._handleTouchTap} /> 

     </div> 
    ); 
    }, 

    _submitTouchTap: function(){ 
    var primaryEmail = this.refs.email.getValue(); 
    var password = this.refs.password.getValue(); 
    var data = { 
     primaryEmail: primaryEmail, 
     password: password 
    }; 
    $.ajax({ 
     url: '/login', 
     dataType: 'json', 
     type: 'post', 
     data: data, 
     success: function(data) { 
     console.log(data); 
     this.props.onLoggedIn(data); 
     }.bind(this), 
     error: function(xhr, status, err) { 
     this.transitionTo('/login'); 
     }.bind(this) 
    }); 
    this.refs.loginDialog.setState({open: false}); 
    }, 

    _cancelTouchTap: function(){ 
    this.refs.loginDialog.setState({open: false}); 
    }, 

    _handleTouchTap() { 
    this.refs.loginDialog.setState({open: true}); 
    } 
}); 
module.exports = LoginDialog;