[英]How to Pass React form state from app to multiple components (functional)
我对 React 还是比较陌生,所以如果这是一个重复的帖子,我很抱歉。 我正在与 React 合作创建一个跨不同页面的表单。 这个想法是拥有您从工作申请中收到的表格类型。 一个有多个步骤。
我为表单的每个步骤制作了不同的组件。 第一页是主页。 想象一个按钮将您带到创建页面。 然后您会看到“创建”页面。 有一个带有金额和名称的小表格。 当您单击下一页时,您将看到自定义页面。 您可以在那里按优先级编辑预算。
在我画得不好的图片中,我显然有这个应用程序,还有一个预算主页来管理它的孩子们的状态。 我想我应该这样做,因为这是我知道的唯一方法。 我遇到的问题是:我不知道如何在整个组件中正确传递状态。 二:我什至不知道我所做的是否正确。 React 文档在基于类的组件中使用表单,这有点帮助,但我无法针对我的问题进行配置。
非常感谢任何帮助或建议。 我还想显示预算页面中的代码。
import React, { useState, useEffect, useRef } from "react";
import BudgetResultsPage from './BudgetResultsPage';
const [count, setState] = useState(0);
const handleStateCount = () => {
if(count>3) {count = 0;}
return setState(count + 1);
}
if(count === 0) {
console.log(`homepage state ${count}`)
return (
<div className={Styles.Calculator}>
<BudgetHomePage setState={count} handleStateCount={handleStateCount}/>
</div>
)
} else if(count===1) {
console.log(`budget create state ${count}`)
return (
<div className={Styles.Calculator}>
<CalculatorHeader />
<CreateBudget setState={count} handleStateCount={handleStateCount} setAmount={amount} handleAmount={handleAmount}/>
</div>
)}
其他页面显然有更多的导入,组件中传递的代码也更多。 这只是我处理组件的方式的一个片段。
这可能很愚蠢,但我正在创建一个状态计数,然后当表单的一部分被提交时,计数会增加并根据计数值更改页面。 仅适用于一种状态,但我在向其添加更多状态时遇到问题。
再次感谢!
我已经编写了一个示例功能组件来说明您的一些问题。 我在家里写了这个,只有记事本++,所以如果你复制粘贴可能无法编译。 评论将解释您的问题
import React from 'react';
import Create_budget_page from './Create_budget_page.js';
const BudgetPage = props => {
// State 1: assigning one value to the state.
// State 2: assinging a list to the state.
// State 3: assinging a object to the state.
const [simple_state, set_simple_state] = useState(false);
const [list_state, set_list_state] = useState(["Hello","World","!"]);
const [object_state, set_object_state] = useState(
{
curmenu: "human_bios",
height: "196cm",
weight: "174lbs",
eye_colour: "blue",
hair_colour: "dirty_blonde"
}
);
// there are several possiblities, here's one with a list of objects
const [list_objects, set_list_objects] = useState(
[
{count: 69, wasClicked: false},
{count: 420, wasClicked: true},
// endless possibilities, the tricky part is properly correctly updating your states deep in the list
{integers: [1,5,2,3], keys: {isAlive: false, cur_menu: "config_menu"}}
]
);
// this function updates the state that stores an object
// arguments:
// new_values_object: the programmer passes in a object to the function with the values they want to update
// an example of calling this function in a child functional component:
// props.update_object_state({height: "165cm", weight: "143lbs", hair_colour: "black"});
function update_object_state(new_values_object){
set_object_state(prevState => {
const new_obj = prevState;
// loop through object keys and update the new_obj with the object passed in as a argument
for (var key in new_values_object){
new_obj[key] = new_values_object[key];
}
// returning the new_object will update the object_state
return new_obj;
})
}
// conditionally render based on state
switch(object_state["curmenu"]){
case "home_page":
return (
// pass in
// all props, 1 prop, state
<Create_budget_page {...props} parent_id={prop.parent_id} simple_state={simple_state} list_objects={list_objects}/>
) ;
break;
// pass in function
case "human_bios":
return (
<div className="error_page" onClick={() => {props.update_parent_state({error_occured: true})}}>This is an Error Page, click me to report diagnostics</div>
);
break;
// if none of cases are met default code executes
default:
// renders nothing
return null;
}
}
您遇到了哪些问题? 我假设您留在那里的代码部分位于组件主体内(一个函数,因为您使用的是函数式方式)。
即使您必须记住其他方法,您也应该没有问题将多个道具传递给子组件(道具数量过多意味着一般情况下有问题......)
如果您有更多问题,请告诉我。
编辑:
假设您有那个ResultsPage
子组件,并且在您的父组件中您执行以下操作:
<ResultsPage someProp={someValue} someOtherProp={someOtherValue} />
然后在您的子组件中,您可以像这样管理这些道具:
const ResultsPage = (props) => {
// props is an object like this: { someProp: someValue, someOtherProp: someOtherValue}
... // and in the body of the function you can manipulate it however you want
}
一般来说,最好直接在 param 中解构你的 props 变量,而不是总是像这样执行props.someProp
等:
const ResultsPage = ({someProp, someOtherProp}) => { ... }
更多关于解构的信息在这里
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.