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

npm install axios react-router-dom

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;

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

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

export default App;

npm start