如何使用带有react功能组件的API创建投票

使用带有React功能组件的API创建投票可以通过以下步骤进行：

创建React项目：使用任何一种适合您的方法（如create-react-app等）创建一个新的React项目。
安装所需的依赖：在项目文件夹中打开终端，并使用以下命令安装所需的依赖项：

npm install axios react-router-dom

创建投票组件：在src文件夹中创建一个名为"Vote.js"的新文件，并在其中编写投票组件的代码。以下是一个简单的例子：

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

const Vote = () => {
  const [options, setOptions] = useState([]);
  const [selectedOption, setSelectedOption] = useState('');

  useEffect(() => {
    // 使用axios或其他HTTP库从API获取投票选项数据
    axios.get('https://api.example.com/vote/options')
      .then(response => {
        setOptions(response.data);
      })
      .catch(error => {
        console.log(error);
      });
  }, []);

  const handleOptionChange = (event) => {
    setSelectedOption(event.target.value);
  };

  const handleVoteSubmit = (event) => {
    event.preventDefault();
    // 使用axios或其他HTTP库将选定的选项提交给API进行投票
    axios.post('https://api.example.com/vote/submit', { option: selectedOption })
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.log(error);
      });
  };

  return (
    <div>
      <h2>投票</h2>
      <form onSubmit={handleVoteSubmit}>
        {options.map(option => (
          <div key={option.id}>
            <label>
              <input
                type="radio"
                name="option"
                value={option.id}
                checked={selectedOption === option.id}
                onChange={handleOptionChange}
              />
              {option.label}
            </label>
          </div>
        ))}
        <button type="submit">投票</button>
      </form>
    </div>
  );
};

export default Vote;

使用投票组件：在您的应用程序中的任何位置，导入投票组件并将其放置在适当的位置。例如，将其添加到App.js中的render方法中：

import React from 'react';
import Vote from './Vote';

const App = () => {
  return (
    <div>
      <h1>我的应用程序</h1>
      <Vote />
    </div>
  );
};

export default App;