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

突出显示以上方法，您还可以执行以下操作。将默认状态提升为可以用任何方式预填充的对象，将其水合为状态，然后在调用重置时可以控制将状态重置为多少。这是一个非常普通的示例，但这是解决问题的一种方法。

Click here to view a working example

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

如何在Reactjs中取消挂载组件

3 个答案: