在React中,如果你想要根据用户在一个多选复选框中的选择来创建一个新的页面,你可以通过以下步骤来实现:
首先,你需要一个组件来显示多选复选框,并且能够记录用户的选择。
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>
);
}
接下来,你需要处理用户的提交,并根据用户的选择导航到一个新的页面。这可以通过React Router来实现,假设你已经设置了路由。
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>
);
}
现在,当用户在SelectionPage
组件中选择一些选项并提交表单后,应用将会导航到NewPage
组件,并显示用户所选择的所有选项。
这个示例展示了如何在React中使用复选框来收集用户输入,并根据这些输入在另一个页面上显示结果。你可以根据需要调整选项和页面的布局。
领取专属 10元无门槛券
手把手带您无忧上云