如何在Reactjs中取消安裝組件

Question

我有一個具有多種形式的向導，在向導的最后，我想將它們帶回到第一步。 但是，每個表格都填充有以前的值。

我只想卸下並重新安裝它即可將所有東西擦干凈。 如何在reactjs中做到這一點？

 <StepWizard>
          <Step>
           <NewComponent/>
          </Step>
          <Step>
          <NewComponent/>
          </Step>
          <Step>
            <NewComponent/>
          </Step>
          <Step>
            <NewComponent/>
          </Step>
        </StepWizard>

因此，我將如何觸發一些操作以使“ StepWizard”呈現為新狀態？

我的組件看起來像這樣，我刪除了切換到向導中下一步的代碼。

export default class NewComponent extends Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
  }
  render() {

    return (
      <Formik
        initialValues={{
          name: "",
          website: "",
        }}
        validationSchema={Yup.object().shape({
          name: Yup.string().required('Company Name is Required'),
          website: Yup.string().url('Company Url is Invalid'),
        })}
        onSubmit={(
          values,
          { setSubmitting, setErrors}
        ) => {
        }}
        render={({
          values,
          handleChange,
          handleBlur,
          handleSubmit,
          setFieldValue,
          setFieldTouched
        }) => (
          <form onSubmit={handleSubmit}>
            <div className="field">
              <label className="label">Name</label>
              <div className="control">
                <input
                  className="input"
                  type="text"
                  name="name"
                  maxLength="50"
                  onChange={handleChange}
                  onBlur={handleBlur}
                  value={values.name}
                />
                   <ErrorMessage name="name"/>
              </div>
            </div>
            <div className="field">
              <label className="label">Website</label>
              <div className="control">
                 <Field  className="input" name="website"  type="text" />
                 <ErrorMessage name="website"/>
              </div>
            </div>
          </form>
        )}
      />
    );
  }
}

我正在使用Mbox狀態樹，因此可以將某些東西存儲在我的商店中，該東西可以用來觸發需要觸發才能引起重置的任何內容。

編輯

我應該提到我正在使用此插件： https : //github.com/jcmcneal/react-step-wizard

因此，我不確定是否可以停止渲染步驟，這也意味着我每次都必須處理先前的步驟狀態。

我正在尋找一種可能使一切都消失的東西，因為我在該區域已經花了太多時間，並且不想返工。

Answer 1

您可以通過將向導的當前狀態存儲在狀態對象中來實現。 可以將這種狀態和對其進行突變的動作作為道具傳遞給孩子。 之后，當您需要重置向導時，只需重置狀態即可。

這是一個過於簡化的示例：

class StepWizard extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      step1: {},
      step2: {}
    };
  }

  setStep(step, data) {
    this.setState({ `step${ step }`: data });
  }

  resetWizard() {
    this.setState({
      step1: {},
      step2: {}
    });
  }

  render() {
    return (
      <React.Fragment>
        <Step
          data={ this.state.step1 }
          setData={ (data)=> this.setStep(1, data) }
          />
        <Step
          data={ this.state.step2 }
          setData={ (data)=> this.setStep(2, data) }
          />
      </React.Fragment>
    );
  }
}

現在，在需要重置向導時調用resetWizard 。

Answer 2

如何創建一個具有每個步驟渲染邏輯的Step對象？ 我會正確理解您的用例，因為您一次只想渲染一個步驟，為什么不只渲染與該特定步驟相關的呢？

像下面這樣。

class Wizard {
  constructor(props) {
    super(props);

    this.stepMap = {
        first: <FirstStep />,
        second: <SecondtStep />,
        third: <ThirdStep />,
        fourth: <FourthStep />
    }

    this.state = {
        activeStep: "first"
    }
  }

  changeStep = (stepId) => {
    this.setState({activeStep: stepId});
  }

  render() {
    const activeStepCmp = this.stepMap[this.state.activeStep];

    return (
      <StepWizard>
        {activeStepCmp}
      </StepWizard>
    )
  }
}

Answer 3

突出顯示以上方法，您還可以執行以下操作。 將默認狀態提升為可以用任何方式預填充的對象，將其水合為狀態，然后在調用重置時可以控制將狀態重置為多少。 這是一個非常普通的示例，但這是解決您的問題的一種方法。

單擊此處查看工作示例

 import React from "react"; import ReactDOM from "react-dom"; // generic stage renderer const Stage = ({ step, currentStep, children }) => { return step === currentStep ? <div>{children}</div> : null; }; // generic input controller const Input = ({ stateKey, value, handleOnChange }) => ( <input value={value} onChange={evt => handleOnChange(stateKey, evt.target.value)} /> ); // default state that is used to reference const defaultState = { firstName: '', lastName: '', // default state can also be prefilled with data.. telephoneNumber: '0123456789', } class App extends React.Component { state = { step: 1, ...defaultState }; handleStateUpdate = (key, value) => { this.setState({ [key]: value }); }; incrementStep = () => { if (this.state.step < 3) { this.setState({ step: this.state.step + 1 }); } }; goBack = () => { const { step, lastName, telephoneNumber } = this.state; this.setState({ step: 1, // always reset this one firstName: defaultState.firstName, // only reset this one if it's step 3 lastName: step > 2 ? defaultState.lastName : lastName, // last step blargh, let's reset anyway telephoneNumber: step === 3 ? defaultState.telephoneNumber : telephoneNumber, }); } render() { const { step, firstName, lastName, telephoneNumber } = this.state; return ( <div> {JSON.stringify(this.state)} <h1>Step Wizard - {step}</h1> <Stage step={1} currentStep={step}> <Input stateKey="firstName" value={firstName} handleOnChange={this.handleStateUpdate} /> </Stage> <Stage step={2} currentStep={step}> <Input stateKey="lastName" value={lastName} handleOnChange={this.handleStateUpdate} /> </Stage> <Stage step={3} currentStep={step}> <Input stateKey="telephoneNumber" value={telephoneNumber} handleOnChange={this.handleStateUpdate} /> </Stage> <button onClick={this.goBack}>Go Back to Step 1</button> <button onClick={this.incrementStep}>Next</button> </div> ); } } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);