Создание динамического пользовательского интерфейса заголовка с React и материал 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; 

Я хочу переключите мой заголовок loggedIn на true, как только мой вызов ajax возвращает успех, когда пользователь входит в систему. Однако я не совсем уверен, как передавать данные из отдельного файла (child login.jsx) в мой родительский файл (header.jsx) , Кто-нибудь знает, как я могу это сделать, чтобы создать динамический интерфейс для заголовка?

Как только пользователь зарегистрировался в состоянии для 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;