如何在Reactjs中UnMount组件

Question

我有一个具有多种形式的向导，在向导的末尾，我想把它们带回到第一步。但是，每个表单都使用前面的值填充。

我只想卸下和重装它来擦拭一切干净。我该如何在反应中做到这一点？

 <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

突出上面的方法，您也可以这样做。将默认状态提升到可以预先填充的对象中，将其水合物化为状态，然后当您调用重置时，您可以控制将状态重置到多少。这是一个非常通用的例子，但它是解决问题的一种方法。

单击此处查看工作示例

​

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);

​

Answer 2

您可以通过将向导的当前状态存储在状态对象中(您已经猜到了)来实现这一点。这种状态和变异行为可以作为道具传递给孩子们。之后，当您需要重置向导时，您只需重置状态即可。

下面是一个过于简化的示例：

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 3

创建一个具有每个步骤的呈现逻辑的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>
    )
  }
}