0

我有一个加载组件，它创建一个骨架，直到内容通过@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;

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

任何帮助将不胜感激

4

1 回答 1

1

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

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

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

当您远离时它会起作用form，content因为form在每次渲染时都会使用实际的profileFormData.

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

于 2019-03-26T10:46:50.157 回答