reactjs - 如何在 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

所以我不确定是否可以选择停止渲染步骤，这也意味着我每次都必须处理前一个步骤状态。

如果可能的话，我更多的是寻找可以吹走一切的东西，因为我已经在这个领域花费了太多时间并且不想返工大量。

标签： reactjs

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