使用 React 钩子将输入传递到子组件的输入来更新输入值

Question

我有一个加载组件，可以创建一个框架，直到内容通过@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状态对象作为 prop 传递(注释掉的代码有效，但不会创建我的项目中所需的骨架加载元素

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创建骨架元素，然后将 props 向下传递到另一个组件中，并在下面的代码片段中返回。

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;

这按预期呈现，但是，当我尝试输入输入时，它不会更新输入的值。我的问题是，当输入像我所做的那样作为道具传递给子组件时，如何在输入上更新输入的值？

任何帮助将不胜感激

Answer 1

以下是发生的情况： 您基本上只显示来自useStatecontent

模拟您的 httpRequest，它将content更新为空表单

然后你再也不会更新content了，它仍然是第一次渲染时的空形式。

当您将form排除在content之外时，它会起作用，因为form每次渲染时都会使用实际profileFormData进行评估。

我建议不要使用状态来存储您的情况下(可能还有大多数其他情况)的节点。http 请求的返回应填充模板可以从中读取的数据存储，但考虑到表单也需要从其他源(如当前输入状态)读取，因此将form保留在渲染中更安全，它将在每次渲染时更新。