我可以在静态页面中使用 Axios 和 ReactJS 吗？答案

【问题标题】：Can I use Axios with ReactJS in a static page?我可以在静态页面中使用 Axios 和 ReactJS 吗？
【发布时间】：2017-12-05 10:21:03
【问题描述】：

我想为我的 react 应用程序创建一个联系表单，这是一个静态应用程序（我根本没有后端，只有前端）。我正在尝试通过对某个 API 的 POST 请求来执行此操作，我发现 Axios 可能会有所帮助。我想做一些事情，比如当用户单击提交按钮时，它会调用一个函数来对表单进行所有验证，然后通过 Axios 的 POST 操作提交数据。

这可能吗，还是我的方法有误？提前致谢。

【问题讨论】：

标签： forms reactjs post request axios

【解决方案1】：

是的，你可以。您要做的是侦听表单的 onSubmit 事件并在该侦听器中发送 POST 请求。您也可以在该方法中进行验证。

handleSubmit(e) {
  // Stop browser from submitting the form.
  e.preventDefault();

  // Validate here or directly when setting state.
  // ...

  // Then send a POST request to your endpoint.
  axios
    .post('https://your-form.com/endpoint', {
      // Your data goes here.
      firstName: this.state.firstName,
      lastName: this.state.lastName
    })
    .then(function(response) {
      // Done!
      console.log(response);
    })
}

// In the render method: listen for the submit event.
<form onSubmit={this.handleSubmit} />

这是一个工作示例：

class Example extends React.Component {
  constructor() {
    super();
    this.state = {
      firstName: '',
      lastName: ''
    };

    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  handleSubmit(e) {
    // Stop browser from submitting the form.
    e.preventDefault();

    // Validate here or directly when setting state.
    // Then send a POST request to your endpoint.
    axios
      .post('https://reqres.in/api/users', {
        firstName: this.state.firstName,
        lastName: this.state.lastName
      })
      .then(function(response) {
        console.log(response);
      })
      .catch(function(error) {
        console.log(error);
      });
  }

  handleChange(e) {
    this.setState({
      [e.target.name]: e.target.value
    });
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type="text"
          name="firstName"
          value={this.state.firstName}
          onChange={this.handleChange}
        />
        <input
          type="text"
          name="lastName"
          value={this.state.lastName}
          onChange={this.handleChange}
        />
        <input type="submit" />
      </form>
    );
  }
}

ReactDOM.render(<Example />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script>

<div id="root"></div>

【讨论】：