Question

我昨天开始教自己一些React。我有一个登录表单，当单击一个按钮时，它应该向我的后端发送一个AJAX请求。这有效，当我的后端没有运行时，意思是：我自己写的后端（用邮差测试）必须关闭，因此它不会回复，页面可以呈现。当它正在运行时，方法会在渲染上被调用，这是绝对不需要的，因为我的后端发送错误并且页面没有渲染。

我的反应代码在这里：

构造函数：

constructor(props)
    {
        super(props);

        this.login                = this.login.bind(this);
        this.handleChangeUser     = this.handleChangeUser.bind(this);
        this.handleChangePassword = this.handleChangePassword.bind(this);
        this.logout = this.logout.bind(this);

        this.state = {
            user:     '',
            password: '',
            loggedIn: props.loggedIn
        };
    }

表格：

return (
                <div>
                    <Navigation/>
                    <div style={{position: "relative", left: "30%", right: "70%"}}>
                        <label>Username</label><br/>
                        <input type={'text'} onChange={this.handleChangeUser} style={{width: "300px"}}/><br/>
                        <label>Password</label><br/>
                        <input type={'password'} onChange={this.handleChangePassword} style={{width: "300px"}}/><br/>
                        <div style={{width: "300px"}}>
                            <button type={"button"} className={"btn btn-primary"} style={{marginTop: "10px"}} onClick={this.login}>
                                Login
                            </button>
                        </div>
                    </div>
                </div>
            );

导致所有麻烦的登录功能：

login(e)
    {
        e.preventDefault();
        axios({
            method: 'get',
            url:    BASE_URL + LOGIN,
            data:   {
                user:     this.state.user,
                password: this.state.password
            }
        }).then(function (result)
        {
            localStorage.setItem('botusToken', result.body.token);
            this.setState({loggedIn: true});
        }).catch(function ()
        {
            console.log("Error while login in");
        });
    }

这个例子就像一个魅力：

render()
    {
        return (
            <div>
                <form>
                    <label htmlFor="comment">Some comment</label>
                    <label htmlFor="triggerWord">Which trigger-word would you like your tweet to belong to?</label>
                    <select className={"form-control"} onChange={this.handleChangeSelector}>
                        <option>Sad</option>
                        <option>Fake News</option>
                        <option>Taxes</option>
                        <option>Immigrants</option>
                        <option>Make America Great Again</option>
                        <option>Make a new trigger word</option>
                    </select>
                    <Textarea className={"form-control"} rows={2} cols={50} maxLength={140} wrap={"soft"}
                              onChange={this.handleChangeTextArea} value={this.state.tweet}/>
                </form>
                <br/>
                <button type={"button"} className={"btn btn-primary"} onClick={this.submitTweet}>Submit</button>
                <div style={errStyle}>{this.state.err}</div>
            </div>
        );
    };

这种方法就像一个与上面的形式一致的魅力：

submitTweet(e)
    {
        let self = this;
        e.preventDefault();
        let isNew = false;
        if (this.state.topic === "Make a new trigger word") isNew = true;
        axios({
            method: 'post',
            url:    BASE_URL + SUBMIT_TWEET,
            data:   {
                topic: this.state.topic,
                tweet: this.state.tweet,
                new:   isNew
            }
        }).then(function ()
        {
            self.setState({err: ''});
        }).catch(function (err)
        {
            self.setState({err: "You have not entered all necessary information!"});
        });

        this.setState({tweet: ''});

    };

感谢您一起来看看！

Answer 1

如何将onClick={() => this.login}更改为onClick={(e) => this.login(e)}

this.login在渲染时被调用。这就是当后端没有运行时渲染正在进行的原因。

要在React类中绑定函数，请使用构造函数中的bind调用或标记中的箭头函数。

Answer 2

而不是onClick={() => this.login}只做onClick={this.login}

在没有onClick触发器的情况下，在渲染中制作AJAX请求

2 个答案: