Question

让我说我的代码在这里：

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中。并且span命名是为我的后端指定一个名称来读取它。

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

Answer 1

由于您正在使用React，因此您可能会开发一个不会重新加载的单页应用程序，也不会将用户引导到另一个位置。要执行POST请求，您需要执行asynchronously。一种方便的方法是使用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>
    );
  }
}

Answer 2

您可以将隐藏的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

在没有表单的React中使用POST？

2 个答案: