Обновление входного значения с помощью ввода, введенного в дочерний компонент с помощью React Hooks - PullRequest
Новая
       21

Обновление входного значения с помощью ввода, введенного в дочерний компонент с помощью React Hooks

0 голосов
/ 26 марта 2019

У меня есть компонент загрузки, который создает скелет, пока содержимое не будет обработано с помощью @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;

Это отрисовывается, как и ожидалось, однако, когда я пытаюсь ввести ввод, оно не обновляет значение ввода.У меня вопрос, как мне обновить значение ввода при вводе, когда входные данные передаются как опора дочернему компоненту, как я это сделал?

Любая помощь будет принята с благодарностью

1 Ответ

1 голос
/ 26 марта 2019

Вот что происходит: вы в основном отображаете content из useState

. Вы симулируете свой httpRequest, который обновит content до пустой формы

И тогда вы никогдаобновите content когда-либо снова, это все еще пустая форма с первого рендера.

Это работает, когда вы удерживаете form вне content, потому что form оценивается при каждом рендере с фактическим profileFormData.

Я предлагаю не использовать состояние для хранения узлов в вашем случае (и, вероятно, в большинстве других случаев).Возврат вашего http-запроса должен заполнить хранилище данных, из которого ваш шаблон мог бы прочитать, но, учитывая тот факт, что ваша форма должна также считываться из других источников, например, с текущим состоянием ввода, безопаснее сохранять form врендер, где он будет обновляться при каждом рендере.

...