假设我在这里有这个代码：
getInitialState:function(){
return { food: 'Chinese' }
},
restaurants:function(){
return (<div><form method="post">
<p>I like <span name="food">{this.state.food}</span> food</p>
<button type="submit">Butane</button>
</form></div>);
},
到目前为止，我对 POST 的唯一经验是使用表单和输入字段。所以我想知道如何在不使用更多静态内容的情况下做到这一点。
在上面的示例中，我的内容不是从输入字段派生的。我想将状态变量（在本例中Chinese为 ）放入 POST 请求中。
理想情况下，按钮labeled butane将信息从我的状态提交到我的 POST。跨度名称在那里为我的后端分配一个名称以读取它。
我将如何重新排列此代码以在 POST 上下文中启用状态变量？
由于您正在使用 React，因此您可能会开发一个单页应用程序，它既不会重新加载，也不会将用户引导到另一个位置。要执行 POST 请求，您需要异步执行。一种方便的方法是为此使用axios。整个组件看起来像这样：
import React, { Component } from 'react';
import axios from 'axios';
class X extends Component {
constructor() {
super();
this.state = {
food: 'Chinese'
};
}
handleSubmit(event) {
const {
food
} = this.state;
event.preventDefault();
// do something with form values, and then
axios.post('https://your/api/endpoint', {
food // + any other parameters you want to send in the POST request
}).then(response => {
// do something with response, and on response
}).catch(error => {
// do something when request was unsuccessful
});
}
restaurants() {
return (
<div>
<form
method="post"
onSubmit={event => this.handleSubmit(event)}>
<p>I like <span name="food">{this.state.food}</span> food</p>
<button type="submit">Butane</button>
</form>
</div>
);
}
}
您可以添加隐藏input到form
<div>
<form method="post">
<p>I like <span name="food">{this.state.food}</span> food</p>
<button type="submit">Butane</button>
<!-- Hidden fields -->
<input type="hidden" value={this.state.food}/>
</form>
</div>
更新
同意@Rishat 使用 AJAX 调用。
对于您想要执行普通 POST 请求但不想在表单中添加任何输入字段的另一种情况。您可以使用此解决方案： JavaScript post request like a form submit