如何登录ReactJs

Question

如何登录ReactJS？

我可能是reactJS的新手，所以我不知道如何在reactJS中正确登录。我试过下面这样的方法，但效果不好
如果有人能帮我做我想做的事，那就太好了。提前非常感谢。

登录api终点：http://localhost:8000/api/login

export default class App  extends Component{

constructor(props) {
super(props);
this.state ={
username: "",
password: "",
}
this.onFormSubmit = this.onFormSubmit.bind(this)
}
onFormSubmit(values){
console.log(values);
const formData = new FormData();
formData.append("username", values.username);
formData.append("password", values.password);
const options = {
method: 'POST',
body: formData
};
fetch('http://localhost:8000/api/login', options).then(() => {
this.props.history.replace('/home')
}).catch((error) => {
console.log(this.props.state)
})

};

render(){
return(
<div>
<section class="login_part section_padding ">
<div class="login_part_form">
<Form onFinish={this.onFormSubmit}>
<div class="col-md-12 form-group p_star">
<Form.Item name="username">
<input type="text" class="form-control" placeholder="Username" required />
</Form.Item>
</div>
<div class="col-md-12 form-group p_star">
<Form.Item name="password">
<input type="password" class="form-control"
placeholder="Password" required />
</Form.Item>
</div>
<div class="col-md-12 form-group">
<button type="submit" value="submit" class="btn_3">
log in
</button>
</div>
</Form>

</div>
</section>

</div>
)
}
}

Answer 1

因此，查看您的代码，我并没有真正看到您在任何地方更改状态。看起来您缺少一些简单的处理程序，这些处理程序将使用setState方法来修改您状态中的密码和用户名。您可能希望在更改输入时执行此操作。之后，在onFormSubmit函数中，您希望从您的状态中获取值并将其发送到服务器。