如何在react js中点击添加活动类

import React, { useState } from 'react';

function ActivityForm() {
  const [activities, setActivities] = useState([]);
  const [activityName, setActivityName] = useState('');

  const handleAddActivity = () => {
    if (activityName.trim() !== '') {
      setActivities([...activities, activityName]);
      setActivityName('');
    }
  };

  return (
    <div>
      <input
        type="text"
        value={activityName}
        onChange={(e) => setActivityName(e.target.value)}
      />
      <button onClick={handleAddActivity}>添加活动类</button>

      <ul>
        {activities.map((activity, index) => (
          <li key={index}>{activity}</li>
        ))}
      </ul>
    </div>
  );
}

export default ActivityForm;