使用已在多选复选框中选择的数组创建新的移动页面

import React, { useState } from 'react';

function SelectionPage({ onSubmit }) {
  const [selectedItems, setSelectedItems] = useState([]);

  const options = [
    { id: 1, label: '选项 1' },
    { id: 2, label: '选项 2' },
    { id: 3, label: '选项 3' },
    // 添加更多选项
  ];

  const handleCheckboxChange = (event) => {
    const { value, checked } = event.target;
    if (checked) {
      setSelectedItems([...selectedItems, value]);
    } else {
      setSelectedItems(selectedItems.filter(item => item !== value));
    }
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    onSubmit(selectedItems);
  };

  return (
    <form onSubmit={handleSubmit}>
      {options.map(option => (
        <label key={option.id}>
          <input
            type="checkbox"
            value={option.label}
            checked={selectedItems.includes(option.label)}
            onChange={handleCheckboxChange}
          />
          {option.label}
        </label>
      ))}
      <button type="submit">提交</button>
    </form>
  );
}

import React from 'react';
import { BrowserRouter as Router, Route, Switch, useHistory } from 'react-router-dom';

function App() {
  const history = useHistory();

  const handleSelectionSubmit = (selectedItems) => {
    // 可以在这里处理选择，例如保存到状态管理库或上下文
    // 然后导航到新页面
    history.push('/new-page', { selectedItems });
  };

  return (
    <Router>
      <Switch>
        <Route path="/" exact>
          <SelectionPage onSubmit={handleSelectionSubmit} />
        </Route>
        <Route path="/new-page" exact>
          <NewPage />
        </Route>
      </Switch>
    </Router>
  );
}

function NewPage() {
  // 使用location来访问传递的状态
  const { state } = useHistory();
  const { selectedItems } = state || { selectedItems: [] };

  return (
    <div>
      <h1>新页面</h1>
      <ul>
        {selectedItems.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}