Javascript 如何将React表单状态从应用程序传递到多个组件(功能)
我还是个新手,所以如果这是一篇重复的文章,我很抱歉。我正在使用React创建一个跨不同页面的表单。这样做的目的是获得你从求职申请中收到的表格类型。有多个步骤的人 我为表单的每个步骤制作了不同的组件。第一页是主页。想象一下,有一个按钮将您带到创建页面。然后您将看到创建页面。有一个小表单,有数量和名称。单击下一页时,您将看到自定义页面。在那里,您可以按优先级编辑预算 在我拙劣的图片中,我有一个应用程序,还有一个预算主页来管理孩子们的状态。我想我应该这样做,因为这是我唯一知道的方法我的问题是:我不知道如何正确地在整个组件中传递状态。第二:我甚至不知道我所做的是否正确。React文档在基于类的组件中使用表单,这对我很有帮助,但我无法针对我的问题进行配置 非常感谢您的帮助或建议。我还想显示预算页面中的代码Javascript 如何将React表单状态从应用程序传递到多个组件(功能),javascript,reactjs,forms,react-hooks,use-state,Javascript,Reactjs,Forms,React Hooks,Use State,我还是个新手,所以如果这是一篇重复的文章,我很抱歉。我正在使用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,{useState,useffect,useRef}来自“React”;
从“./BudgetResultsPage”导入BudgetResultsPage;
常量[计数,设置状态]=使用状态(0);
常量handleStateCount=()=>{
如果(计数>3){count=0;}
返回设置状态(计数+1);
}
如果(计数==0){
log(`homepage state${count}`)
返回(
)
}否则如果(计数===1){
log(`budget create state${count}`)
返回(
)}
其他页面的导入明显更多,组件中传递的代码也更多。这只是我处理组件的方式的一个片段
这可能很愚蠢,但我正在状态中创建一个计数,然后当表单的一部分被提交时,计数会上升,它会根据计数所在的位置更改页面。只在一个状态下工作很好,但我在添加更多状态时遇到问题。
再次感谢 您遇到了哪些问题?我假设您留下的代码部分位于组件体(一个函数,因为您使用的是函数方式)内部 将多个道具传递给子组件应该没有问题,即使您必须记住其他方法(道具数量过多意味着总体上有问题…) 如果你有更多问题,请告诉我 编辑: 假设您有
ResultsPage
子组件,并且在父组件中执行如下操作:
<ResultsPage someProp={someValue} someOtherProp={someOtherValue} />
通常,最好直接在param中分解props变量,而不是总是执行props.someProp
等操作。如下所示:
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
}
const ResultsPage = ({someProp, someOtherProp}) => { ... }
有关destructure的更多信息我已经编写了一个功能组件示例,说明了您的一些问题。我在家里写的,只有记事本+,所以如果复制粘贴,可能无法编译。这些评论将解释你的问题
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;
}
}
从“React”导入React;
从“./Create_budget_page.js”导入创建_budget_页面;
const BudgetPage=道具=>{
//状态1:为状态指定一个值。
//状态2:将列表分配给状态。
//状态3:将对象分配给状态。
const[simple_state,set_simple_state]=useState(false);
const[list_state,set_list_state]=useState([“你好”,“世界”,“!”);
const[object\u state,set\u object\u state]=useState(
{
curmenu:“人类生物系统”,
身高:“196厘米”,
体重:“174磅”,
眼睛颜色:“蓝色”,
头发颜色:“肮脏的金发女郎”
}
);
//有几个可能性,这里有一个对象列表
const[list\u objects,set\u list\u objects]=useState(
[
{count:69,wasClicked:false},
{count:420,wasClicked:true},
//无休止的可能性,棘手的部分是正确地更新列表深处的状态
{整数:[1,5,2,3],键:{isAlive:false,cur_menu:“config_menu”}
]
);
//此函数用于更新存储对象的状态
//论据:
//new_values_object:程序员向函数传递一个对象,其中包含要更新的值
//在子功能组件中调用此函数的示例:
//道具。更新物体状态({身高:“165厘米”,体重:“143磅”,头发颜色:“黑色”});
函数更新对象状态(新值对象){
设置对象状态(prevState=>{
const new_obj=prevState;
//循环遍历对象键,并使用作为参数传入的对象更新新的_obj
for(新值对象中的var键){
新对象[键]=新对象[键];
}
//返回新的\u对象将更新对象\u状态
返回新的_obj;
})
}
//基于状态的有条件渲染
开关(对象状态[“curmenu”]){
案例“主页”:
返回(
//传入
//所有道具,1道具,状态
) ;
打破
//传递函数
案例“人类生物系统”:
返回(
{props.update_parent_state({error_occurrent:true}}}>这是一个错误页面,请单击我报告诊断
);
打破
//如果不满足任何情况,则执行默认代码
违约:
//一无所获
返回null;
}
}
我当然可以,React表单的文档是用C编写的