使用React.js，如何从表单中获取信息并使用条件呈现

Question

我目前正在做一个使用表单的React项目。在我的表单中有问题，用户可以在这些问题中选择听起来更像他们的答案，用户可以完成调查并点击提交。目前在我的应用程序中，当用户点击提交答案将显示在控制台中。我的目标是从控制台中获取这些打印的答案，并使用if…else语句(条件呈现)将用户带到特定的页面。我在理解如何执行此操作的概念方面有问题。

测试用例

• 从表单中获取信息，并使用if/else语句将使用转移到另一个页面

步骤1)用户回答问题并点击提交。期望:提交答案的选择实际的:选择的答案被提交，但是它们被提交到控制台。

步骤2)用户选择的答案在if…else语句(或其他方法)中呈现，并根据他们的答案将用户发送到特定的页面。例:用户选择

{"gender"male"userAge"young"goals"active"}然后发送到该用户的特定页面。期望:在提交答案对象后，获取信息并用于将用户发送到另一个页面。实际:失败很多!!

有一段时间我得到了错误。未捕获的类型错误:props。getData不是函数

我很难完成当前的任务，并质疑我是否以正确的方式处理这种情况，也可以使用if/else语句或三元运算符(这也是我所拥有的问题，但可以稍后删除)是正确的选择。

如果我的问题能得到一些帮助，我会很感激的。谢谢你！

import ReactDOM from "react-dom/client";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<App />)

import React, {useState} from 'react';
import Introduction from './components/introduction';
import Questions from './components/beginning';
import Male from './components/questions';
import {BrowserRouter as Router, Route, Routes} from 'react-router-dom';
export default function App() {

return (
//Revisit <Route path="/questions" element= {<Male />} /> for Readability!!
<Router>
<Routes>
<Route path= "/" element={<Introduction />} />
<Route path="/beginning" element= {<Questions  />} />
<Route path="/personalExercise" element={<personalExercise/>} />
<Route path="/questions" element= {<Male />}  /> 
</Routes>
</Router>
);
}

import React, {useState} from 'react';
import Form from 'react-bootstrap/Form';

export default function Questions(props) {

const[formData, setFormData] = useState({
gender: "", 
userAge: "", 
goals:"", 
});
function handleChange(event) {
const { name, value, type, checked } = event.target;
setFormData(prevFormData => {
return {
...prevFormData,
[name]: type === 'checkbox' ? checked : value 
};
});
}
function handleSubmit(event) {
event.preventDefault()
console.log(formData)
};

return (
<>
<header>Questions</header>
<Form onSubmit={handleSubmit}>
<fieldset>
<legend>What was your gender at birth</legend>
<input 
type='radio'
id = 'male'
name = 'gender' 
value = 'male'
checked={formData.gender === "male"}
onChange={handleChange}
/>
<label htmlFor="male"> Male </label>
<br />
<input 
type='radio'
id='female'
name='gender'
value = 'female' 
checked={formData.gender === "female"}
onChange={handleChange}
/>
<label htmlFor="female"> Female </label>
<br />
</fieldset>
<fieldset>
<legend>How old are you?</legend>
<input 
type='radio'
id="young"
name="userAge"
value="young"
checked={formData.userAge === "young"}
onChange={handleChange}
/>
<label htmlFor="young"> 18-28 </label>
<br />
<input 
type='radio'
id="middleAged"
name="userAge"
value="middleAged"
checked={formData.userAge === "middleAged"}
onChange={handleChange}
/>
<label htmlFor="middleAged"> 29-39 </label>
<br />
<input 
type='radio'
id="older"
name="userAge"
value="older"
checked={formData.userAge === "older"}
onChange={handleChange}
/>
<label htmlFor="older"> 40-50 </label>
<br />
<input 
type='radio'
id="senior"
name="userAge"
value="senior"
checked={formData.userAge === "senior"}
onChange={handleChange}
/>
<label htmlFor="senior"> 51+ </label>
<br />
</fieldset>
<br />
<fieldset>
<legend>What kind of fitness would you prefer?</legend>
<input 
type="radio"
id="active"
name="goals"
value="active"
checked = {formData.goals === "active"}
onChange={handleChange}
/>
<label htmlFor='active'>To stay active!</label>
<br />
<input
type="radio"
id="weight"
name="goals"
value= "weight"
checked = {formData.goals === "weight"}
onChange={handleChange}
/>
<label htmlFor="weight"> To loose weight</label>
</fieldset>
<br />
<button>Submit</button>
</Form>

</>
)
}

Answer 1

使用useNavigate钩子

const navigate = useNavigate()

function handleSubmit(event) {
event.preventDefault()
navigate('/path/here');
};

Answer 2

如前所述，使用useNavigate()导航到另一条路由。对于您的条件，您只需要在用户提交后检查formData状态即可。我会这样做:

function handleSubmit(event) {
event.preventDefault()
navigate(getPath());
};
const getPath = () => {
switch (formData) {
case { gender: "male", userAge: "young", goals: "active" }: return "pathA";
break;
case { gender: "female", userAge: "young", goals: "active" }: return "pathB"
break;
etc...
}
}

现在，我不确定切换是否是你正在做的最好的选择，但也许这会有所帮助。

至于要访问另一个组件中的用户表单数据，您要么需要在父组件中创建formData状态，然后向下钻取到所需的所有组件，要么需要创建一个上下文，以便可以从任何组件访问该数据。查看React Context.