Javascript React：在jQuery statusCode之后调用函数

免责声明：我对javascript非常陌生

当我单击标记为“Logga in”的按钮时，我调用函数handleLogin（）。如果返回200 OK，我想调用函数handleOpen

当我尝试使用下面显示的代码执行此操作时，我得到了“uncaughtreferenceerror:handleOpen未定义”，我不知道为什么

import React from 'react';
import RaisedButton from 'material-ui/lib/raised-button';
import Dialog from 'material-ui/lib/dialog';
import FlatButton from 'material-ui/lib/flat-button';
import TextField from 'material-ui/lib/text-field';


const styles = {
    container: {
        textAlign: 'center',
        paddingTop: 200
    }
};

class Main extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.handleClose = this.handleClose.bind(this);
    this.handleOpen = this.handleOpen.bind(this);
    this.handleLogin = this.handleLogin.bind(this);
    this.handleSend = this.handleSend.bind(this);

    this.state = {
        open: false
    };
  }

    handleClose() {
        this.setState({
            open: false
        });
    }

    handleOpen() {
        this.setState({
            open: true
        });
    }

  handleLogin() {
      $.ajax({
          type: 'GET',
          url : "a url",
          statusCode: {
              200: function () {
                  alert('200');
                  handleOpen
              },
              401: function () {
                  alert('401');
              }
          }
      });
  }

    handleSend() {
        $.ajax({
            type: 'GET',
            url : "a url",
            statusCode: {
                200: function () {
                    alert('200');
                },
                404: function () {
                    alert('404');
                }
            }
        });
    }

    render() {
        const standardActions = (
            <div>
                <FlatButton
                    label="Avbryt"
                    secondary={true}
                    onTouchTap={this.handleClose}
                />

                <FlatButton
                    label="Skicka"
                    primary={true}
                    onTouchTap={this.handleSend}
                />
            </div>
        );

        return (
            <div style={styles.container}>
                <Dialog
                    open={this.state.open}
                    actions={standardActions}
                    onRequestClose={this.handleClose}
                    modal={true}
                >

                    <TextField
                        ref="recipientField"
                        floatingLabelText="Mottagare"
                    /><br/>

                    <TextField
                        ref="messageField"
                        floatingLabelText="Skriv ditt meddelande"
                        multiLine={true}
                        fullWidth={true}
                    />
                </Dialog>

                <TextField
                    ref="usernameField"
                    floatingLabelText="Användarnamn"
                    style={{
                    width: '20%'
                    }}
                />

                <TextField
                    ref="passwordField"
                    floatingLabelText="Lösenord"
                    type="password"
                    style={{
                    width: '20%'
                    }}
                /><br/>

                <RaisedButton
                    label="Logga in"
                    primary={true}
                    onTouchTap={this.handleLogin}
                    style={{
                    width: '40%'
                    }}
                />
            </div>
        );
    }
}

export default Main;

从“React”导入React；
从“物料ui/lib/raised按钮”导入RaisedButton；
从“材质ui/lib/Dialog”导入对话框；
从“物料界面/库/平面按钮”导入平面按钮；
从“物料界面/库/文本字段”导入文本字段；
常量样式={
容器：{
textAlign:'中心'，
加油站：200
}
};
类Main扩展了React.Component{
构造函数（道具、上下文）{
超级（道具、背景）；
this.handleClose=this.handleClose.bind（this）；
this.handleOpen=this.handleOpen.bind（this）；
this.handleLogin=this.handleLogin.bind（this）；
this.handleSend=this.handleSend.bind（this）；
此.state={
开放：假
};
}
handleClose（）{
这是我的国家({
开放：假
});
}
handleOpen（）{
这是我的国家({
开放：是的
});
}
handleLogin（）{
$.ajax({
键入：“GET”，
url:“一个url”，
状态代码：{
200：函数（）{
警报（“200”）；
山猫
},
401：函数（）{
警报（“401”）；
}
}
});
}
handleSend（）{
$.ajax({
键入：“GET”，
url:“一个url”，
状态代码：{
200：函数（）{
警报（“200”）；
},
404：函数（）{
警报（'404'）；
}
}
});
}
render（）{
常量标准动作=(
);
返回(




);
}
}
导出默认主；

handleOpen

不存在，因为它是类上的属性。您需要通过

this.handleOpen

访问它。此外，要调用函数，还需要parens

this.handleOpen（）

。最后，您可能会得到一个绑定错误，因此我会将您的

statusCode

回调更改为arrow函数

200:（）=>this.handleOpen（）

这是非常基本的东西。我会考虑做一些介绍JS教程或书。这听起来是个好主意。也许我超越了自己。不过你的解决方案很有魅力。比你还高兴。