javascript - 在 React 中使用 POST 而不使用表单?

标签 javascript reactjs

假设我这里有这段代码:

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 请求中。

理想情况下,标记为丁烷的按钮将我所在州的信息提交到我的 POST 中。跨度名称是为了给它分配一个名称,供我的后端读取它。

如何重新安排此代码以启用在 POST 上下文中使用状态变量?

最佳答案

您可以将隐藏的输入添加到表单

<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

关于javascript - 在 React 中使用 POST 而不使用表单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39298644/

相关文章:

javascript - mixpanel-2-latest.min.js :9 Mixpanel error: "mixpanel" object not initialized

javascript - 开 Jest 测试 'unexpected token export'

node.js - 将 nodejs 应用程序部署到 heroku 时遇到问题

javascript - 如何在React Native中获取选定的元素?

javascript - 使用 PHP 进行地理定位

javascript - 按值排列的对象紧凑数组(Jquery 或 Underscore)

Javascript 使用正则表达式在公司名称周围添加双引号

javascript - 返回 jQuery Mobile 时如何获得通知?

javascript - 使用状态在 React 中显示/隐藏组件

javascript - React-DOM 自动触发 onClick 处理程序