I have started yesterday to teach myself some React. I have a login form that is supposed to send a AJAX request to my backend when a button is clicked. This works, when I have my backend not running, meaning: My self written backend (tested with postman) has to be turned off so it does not reply and the page can render. When it is running though the method gets called on render which is absolutely not desired as my backend sends an error and the page does not render.
My react code is here:
The Constructor:
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
};
}
The Form:
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>
);
And the login function that is causing all the trouble:
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");
});
}
This example works like a charm:
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>
);
};
This method works like a charm in harmony with the form above:
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: ''});
};
Thank you for taking a look!