모든 경과 도달 가능 상태를 포함한 리액트컴포넌트를 리셋하려면 어떻게 해야 하나요?

모든 경과 도달 가능 상태를 포함한 리액트컴포넌트를 리셋하려면 어떻게 해야 하나요?

개념적으로 스테이트풀한 리액션컴포넌트를 리셋하는 경우가 있습니다.이상적인 동작은 오래된 컴포넌트를 제거하고 새 컴포넌트를 다시 설치하는 것과 같습니다.

React는 방법을 제공합니다.setState컴포넌트 자체의 명시적 상태를 설정할 수 있지만 브라우저 포커스나 폼 상태 등의 암묵적 상태는 제외되며 자녀 상태도 제외됩니다.모든 간접적인 상태를 포착하는 것은 까다로운 작업일 수 있습니다. 그리고 저는 모든 새로운 놀라운 상태를 가지고 장난을 치는 것보다 엄격하고 완벽하게 해결하는 것을 선호합니다.

이를 위한 API나 패턴이 있나요?

편집: 간단한 예시를 만들었습니다.this.replaceState(this.getInitialState())접근하여 그것을 와 대조하다this.setState(this.getInitialState())접근법: jsfiddle -replaceState보다 견고합니다.

언급하는 암묵적인 브라우저 상태 및 자녀 상태가 리셋되도록 하기 위해 에 의해 반환되는 루트레벨 컴포넌트에 Atribute를 추가할 수 있습니다.render; 변경 시 해당 컴포넌트는 폐기되고 처음부터 작성됩니다.

render: function() {
    // ...
    return <div key={uniqueId}>
        {children}
    </div>;
}

개별 구성 요소의 로컬 상태를 재설정할 수 있는 바로 가기는 없습니다.

추가key재초기화할 필요가 있는 요소에 대한 어트리뷰트.는, 재초기화할 때마다, 이 어트리뷰트를 새로고침 합니다.props또는state요소 변경에 관련짓습니다.

key={new Date().get Time()}

다음은 예를 제시하겠습니다.

render() {
  const items = (this.props.resources) || [];
  const totalNumberOfItems = (this.props.resources.noOfItems) || 0;

  return (
    <div className="items-container">
      <PaginationContainer
        key={new Date().getTime()}
        totalNumberOfItems={totalNumberOfItems}
        items={items}
        onPageChange={this.onPageChange}
      />
    </div>
  );
}

당신은 실제로 피해야 합니다.replaceState및 사용setState대신.

의사 말로는replaceState"React의 미래 버전에서는 완전히 삭제될 것입니다."아마 제거가 될 것 같아요. 왜냐하면replaceState리액트의 철학에 맞지 않는 것 같아요리액트 컴포넌트가 스위스 칼처럼 느껴지기 시작하도록 도와줍니다.이는 React 구성요소가 자연스럽게 성장하여 소형화되고 목적에 맞게 제작되는 것에 반하는 것입니다.

React에서 일반화 또는 전문화를 잘못해야 하는 경우: 전문화를 목표로 합니다.결론적으로 컴포넌트의 스테이트 트리는 어느 정도의 절약성을 가지고 있어야 합니다(브랜드가 좋은 신제품을 만들고 있다면 이 규칙을 잘 깨도 상관없습니다).

어쨌든 이렇게 하는 거야.위의 Ben의 답변(승인)과 비슷하지만 다음과 같습니다.

this.setState(this.getInitialState());

"를 리셋하려면 노드를 .을 활용하여 vdom을 합니다.key그 컴포넌트의 지지대.그 컴포넌트는 도매로 새 렌더로 대체됩니다.

참고 자료: https://facebook.github.io/react/docs/component-api.html#replacestate

「」를하는 key속성을 요소에 할당하고 부모로부터의 값을 제어합니다.다음은 컴포넌트를 사용하여 자신을 리셋하는 방법의 예입니다.

키는 부모 요소로 제어되지만 키를 업데이트하는 함수는 기본 요소로 전달됩니다.이렇게 하면 양식을 재설정하는 버튼이 양식 구성 요소 자체에 있을 수 있습니다.

const InnerForm = (props) => {
  const { resetForm } = props;
  const [value, setValue] = useState('initialValue');

  return (
    <>
      Value: {value}
      <button onClick={() => { setValue('newValue'); }}>
        Change Value
      </button>
      <button onClick={resetForm}>
        Reset Form
      </button>
    </>
  );
};

export const App = (props) => {
  const [resetHeuristicKey, setResetHeuristicKey] = useState(false);
  const resetForm = () => setResetHeuristicKey(!resetHeuristicKey);
  return (
    <>
      <h1>Form</h1>
      <InnerForm key={resetHeuristicKey} resetForm={resetForm} />
    </>
  );
};

예( 「」의 )MyFormComponent'CHANGE: 'CHANGE: 'CHANGE: 'CHANGE:

function render() {
    const [formkey, setFormkey] = useState( Date.now() )

    return <>
        <MyFormComponent key={formkey} handleSubmitted={()=>{
            setFormkey( Date.now() )
        }}/>
    </>
}

다음 형식의 메서드reset()을 사용할 수 있습니다.

import { useRef } from 'react';

interface Props {
    data: string;
}

function Demo(props: Props) {
    const formRef = useRef<HTMLFormElement | null>(null);

    function resetHandler() {
        formRef.current?.reset();
    }

    return(
        <form ref={formRef}>
            <input defaultValue={props.data}/>
            <button onClick={resetHandler}>reset</button>
        </form>
    );
}

언급URL : https://stackoverflow.com/questions/21749798/how-can-i-reset-a-react-component-including-all-transitively-reachable-state