使用 React 和 Material 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。但是，我不太确定如何将数据从单独的文件（子 login.jsx）传递到我的父文件（header.jsx）。有谁知道我可以如何做到这一点，以便我可以为标题创建一个动态 UI？

一旦用户登录，标头组件中的 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;