javascript - 使用 React Hooks 将输入传递给子组件来更新输入值
问题描述
我有一个加载组件,它创建一个骨架,直到内容通过@trainline/react-skeletor
. 在这种情况下,我正在为表单创建骨架。
首先,我有一个CodeSandbox供那些想要查看正在发生的事情的人使用,并且所有组件都用于更好地了解解决方案。
我也在使用基于函数的组件,并希望保持这种状态,除非通过基于函数的组件无法做到这一点,否则我不想使用基于类的组件来解决此问题。
我有一个组件ProfileForm
,目前包含一个h3
和一个form
表格如下
const form = (
<>
<FormControl key={"profileForm"} submit={profileFormSubmit} form={profileFormData} validation={profileFormValidation}>
<InputControl autoComplete="off" type="text" name="emailAddress" placeholder="Email address" label="Email Address">
<ErrorMsg map="required" msg="Email is required"></ErrorMsg>
</InputControl>
</FormControl>
</>
)
FormControl
组件返回一个<form>
元素
InputControl
组件返回一个<label>
和<input>
元素
ErrorMsg
组件返回一个<div>
将呈现如下。
<form class="Form " novalidate="">
<div class="InputControl">
<div>
<label for="emailAddress">Email Address</label>
<input type="text" placeholder="Email address" name="emailAddress" id="emailAddress" autocomplete="off" value=""></div>
<div class="InputControl--Errors">
</div>
</div>
</form>
我创建了一个虚拟 http 请求,在其中更新了一个带有标题和上面表格的状态对象。
const [content, setContent] = useState();
const ttl = 500;
/*simulate http request*/
useEffect(() => {
const timeout = setTimeout(() => {
setContent({ title: "My Personal Details", form });
}, ttl);
return () => {
clearTimeout(timeout);
};
}, []);
在我的回报中,我将content
状态对象作为道具传递(注释掉的代码有效,但不会创建我的项目中所需的骨架加载元素
return (
<div className="ProfileForm">
<h2 style={{ color: "red" }}>Not working: Passing Form Down to Child</h2>
<ProfileFormContainer content={content} />
{/* <h2 style={{ color: 'green' }}>Working: Render Directly in return</h2>
{form}*/}
</div>
);
ProfileFormContainer
创建骨架元素,然后将道具向下传递到另一个组件,并在下面的代码片段中返回。
const Wrapper = createSkeletonElement('div', 'Loader Loader--InlineBlock ProfileForm--loading');
const H3 = createSkeletonElement('h3', 'Loader Loader--InlineBlock');
const DIV = createSkeletonElement('div', 'Loader Loader--Block ');
const ProfileFormLoader = (props) => {
return (
<Wrapper className="ProfileForm">
<H3 className="ProfileForm-title">{ props.title }</H3>
<DIV>
{props.form}
</DIV>
</Wrapper>
);
}
export default ProfileFormLoader;
这按预期呈现,但是,当我尝试输入输入时,它不会更新输入的值。我的问题是,当输入作为道具传递给子组件时,如何更新输入的值?
任何帮助将不胜感激
解决方案
这是发生的事情:您基本上只显示content
来自useState
您模拟您的 httpRequest,它将更新content
为一个空表单
然后你再也不会更新content
了,它仍然是第一次渲染的空表单。
当您远离时它会起作用form
,content
因为form
在每次渲染时都会使用实际的profileFormData
.
我建议不要在您的情况下使用状态来存储节点(可能还有大多数其他情况)。您的 http 请求的返回应该填充您的模板可以读取的数据存储,但考虑到您的表单也需要从其他来源读取,例如当前输入状态,保留form
在渲染中更安全,其中它将在每次渲染时更新。
推荐阅读
- r - 根据R中另一个的行和列对矩阵进行排序
- javascript - 在纯 JavaScript 中检查连接性的最佳方法是什么?
- python - 使用 Paho Mqtt 客户端在 on_message 中发布不工作
- java - Selenium Java 比较不正确?
- mysql - 如何在 mysql 中使用动态日期组合 2 个查询?
- docker - 从 Docker 容器连接到主机上的 PubSub 模拟器
- python - 从字符串中删除任何撇号 - Python Pandas
- c++ - 为什么-1等于整数-5的第4个字节?
- java - JWT authentication with spring and angular with null header
- c# - WinForms 圆环图和饼图标签背景元素颜色属性