使用React Hooks创建具有多个输入的axios post

React Hooks是React 16.8版本引入的一种新的特性，它允许我们在无需编写类组件的情况下使用状态和其他React特性。Axios是一个流行的基于Promise的HTTP客户端，用于发送HTTP请求。

使用React Hooks创建具有多个输入的axios post可以通过以下步骤实现：

首先，确保你的项目中已经安装了React和Axios依赖。你可以使用以下命令进行安装：

npm install react axios

在你的函数组件中，导入React和Axios：

import React, { useState } from 'react';
import axios from 'axios';

创建一个函数组件，并使用useState Hook来管理输入的状态：

function MyComponent() {
  const [input1, setInput1] = useState('');
  const [input2, setInput2] = useState('');
  // 这里可以继续添加更多的输入状态

  const handleSubmit = async () => {
    try {
      const response = await axios.post('https://api.example.com/endpoint', {
        input1,
        input2,
        // 这里可以继续添加更多的输入
      });
      console.log(response.data);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div>
      <input
        type="text"
        value={input1}
        onChange={(e) => setInput1(e.target.value)}
      />
      <input
        type="text"
        value={input2}
        onChange={(e) => setInput2(e.target.value)}
      />
      {/* 这里可以继续添加更多的输入 */}
      <button onClick={handleSubmit}>提交</button>
    </div>
  );
}

在上述代码中，我们使用useState Hook来创建了两个输入的状态input1和input2，并使用setInput1和setInput2来更新这些状态。当用户输入内容时，通过onChange事件监听器来更新对应的状态。