1

私の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ユーザーがログインしたときに ajax 呼び出しが成功を返したら、ヘッダーの状態を trueに切り替えたいと考えています。ただし、別のファイル (子 login.jsx) から親ファイル (header. jsx)。ヘッダーの動的UIを作成できるように、これを達成する方法を知っている人はいますか?

ユーザーがログイン状態になると、ヘッダー コンポーネントの LoggedIn の状態で true が返されます。それが真であれば、現在表示されているものとは異なるヘッダーを表示します。

4

1 に答える 1

0

コールバックを使用できます。

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;
于 2015-12-29T02:19:03.493 に答える