하위 반응 양식에서 상위 상태 변수 업데이트

하위 반응 양식에서 상위 상태 변수 업데이트

나는 탐험을 하려고 한다.react와 함께 도서관.next골격내가 an이기 때문에.angular개발자, 나는 내 일부를 재사용하는 것을 좋아한다.reactive-form내 새로운 지원서를 위해.나는 이 도서관이 거의 같은 구현을 가지고 있기 때문에 이 도서관을 찾았다.reactive-form.

지금, 나는 사용하고 있다.state그러나 자식(반응형)의 값을 업데이트하려고 할 때마다 부모 양식의 변수.나는 그것을 해낼 수 없다.

여기 이것을 복제하기 위한 간단한 코드 입니다.

import React, { useState } from "react";
import { FieldGroup, FieldControl } from "react-reactive-form";

export default function App() {
  const [isRegistered, setIsRegistered] = useState(false);

  async function submitForm(e) {
    e.preventDefault();
    setIsRegistered(state => !state);
    console.log(isRegistered);
    //await function call .....
  }

  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <FieldGroup
        control={form}
        render={({ get, invalid }) => (
          <form onSubmit={submitForm}>
            <FieldControl
              name="email"
              render={TextInput}
              meta={{ label: "Email" }}
            />
            <button type="submit">Submit</button>
            <p>{isRegistered.toString()}</p>
            {isRegistered ? <span>Registered Successfully</span> : null}
          </form>
        )}
      />
      
    </div>
  )
}

간단히 말해서, They what's nothing.form그리고TextInput모델이자 요소일 뿐이다.

보다시피, 나는 나의 상태 변수를 업데이트하고 있다.submitForm그것을 의로 하여 기능하다.onSubmit내 형태의 기능. 하지만, 나는 그 기능을 촉발시킬 수 있다.submitForm내가 제출하려고 할때마다, 그러나state variable가치가 변하지 않는다.

중요한 건, 내가 전화하려고 할 때submitForm바깥에서 기능하다child(FieldGroup), 값을 업데이트할 수 있다.

너도 확인할 수 있도록 샘플 앱을 만들었어.

셋팅을 해야 할 것 같다.strict에 지지하다.false을 위해FieldGroup, 여기에 설명된 바와 같이: https://github.com/bietkul/react-reactive-form/blob/master/docs/api/FieldGroup.md

strict: boolean;

기본값: true

참일 경우 상위 구성요소(상태 및 소품) 변경과 관계없이 양식 그룹 제어에 변경이 발생한 경우에만 구성요소를 다시 렌더링한다.

나는 이 도서관을 모르지만, 나에게는 단지 양식 그룹이 다시 렌더링되지 않는 것처럼 보인다. 왜냐하면 그 도서관의 소품들 중 어느 것도 바뀌지 않고 있기 때문이다.

서류상으로는 합격이라고 되어 있다.strict={false}에게<FieldGroup />상위 구성요소가 업데이트될 때 구성요소가 재프로그래밍될 수 있어야 한다.당신의 주어진 예에서(예시를 만들어줘서 고맙다) 그것은 또한 요령을 행하는 것이다.

참조URL: https://stackoverflow.com/questions/63669442/update-parent-state-variable-from-child-react-reactive-form