javascript - 使用 React Hooks 将输入传递给子组件来更新输入值

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 state 对象作为 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;

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

任何帮助将不胜感激

Answer 1

这是发生的事情: 您基本上只显示来自 useState

的 content

您模拟您的 httpRequest，这会将内容更新为空表单

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

当您将 form 保留在 content 之外时，它会起作用，因为 form 在每次渲染时都会使用实际的 profileFormData 进行评估>.

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