Question

在我的header.jsx文件中，我有：

DF = DF.set_index('COL1')
DF

COL1
1.0
2.0
A

在我的登录组件（login.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;

我希望在用户登录时，当我的ajax调用返回成功时，将标题的// 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;状态切换为true。但是，我不太确定如何从单独的文件传递数据（child 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;

使用React和Material UI创建动态标头UI

1 个答案: