Javascript 使用传递到具有React钩子组件的子组件的输入更新输入值

我有一个加载组件，它创建一个骨架，直到内容通过

@trainline/react skeletor

呈现。在本例中，我正在为窗体创建骨架

首先，我为那些希望了解发生了什么的人提供了一个解决方案，以及用于更好地了解解决方案的所有组件

我也在使用基于函数的组件，并且希望保持这种方式，除非通过基于函数的组件无法做到这一点，否则我不想使用基于类的组件来解决这个问题

我有一个组件

ProfileForm

，目前包含

h3

和

表单

表格如下：

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>
      </>
   )

我已经创建了一个虚拟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);
    };
  }, []);

在我的返回中，我将

内容

状态对象作为道具传递（注释掉的代码可以工作，但不会创建项目中所需的骨架加载元素）

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>
  );

但是，当我尝试键入输入时，它不会更新输入值。我的问题是，当输入作为道具传递给子组件时，如何在输入时更新输入值

任何帮助都将不胜感激

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

useState

您模拟httpRequest，它将

内容更新为空表单

然后再也不会更新
内容
，它仍然是第一次渲染时的空表单

当您将
表单
置于
内容
之外时，它会起作用，因为
表单
在每次渲染时都会使用实际的
profileFormData
进行评估

我建议不要使用状态来存储案例中的节点（可能还有大多数其他案例）。http请求的返回应该填充模板可以读取的数据存储，但鉴于表单也需要从其他源读取，如当前输入状态，因此将
表单保持在渲染中更安全，每次渲染时都会更新该表单。
这是有意义的，感谢您清除了该选项up。我可能做得不对，但我已经将表单放入了渲染中，但这意味着它与我的加载组件重叠。我用这个代码沙盒来展示我的意思-我是否错误地实现了你上面所说的内容？是的，你所做的工作是有效的。你的输入之所以保持可见，是因为你的
.Loader
没有正确隐藏它。你可以这样做添加`&input{border color:none；border:none；background color:transparent；&：：占位符{color:transparent；}}}`或更干净的东西！实际上，我在导出
createSkeletonProvider
时需要做一些配置，使用
（{form，content}=>（form，content）===未定义，
并使用正确的结构更新虚拟对象。但是感谢您为我指明了正确的方向，css选项也可以工作
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>
  );

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;