React将转换/动画添加到向导表单

Question

我真的很难在React（没有路由器）上为渲染的多步骤表单/组件添加淡入或过渡效果。

我已尝试使用CSSTransitionGroup。

这是表单容器和呈现的组件（在本例中是最后一个）。

＆＃13;

＆＃13;

class FormStart extends Component {

    constructor(props) {
    super(props);

    this.state = {
    	step: 1,
    	phone: "",
    	firstname: "",
    	lastname: "",
    	city: "",
    	distance: ""
	  }
    this.goToNext = this.goToNext.bind(this);
  }

  goToNext() {
    const { step } = this.state;
    if (step !== 4) {
      this.setState({ step: step + 1 });
      if (step == 3) {
    
        const values = {
          phone: this.state.phone,
          firstname: this.state.firstname,
          lastname: this.state.lastname,
          city: this.state.city,
          distance: this.state.distance
        };
        // submit `values` to the server here.
      }
    }
  }

  handleChange(field) {
    return (evt) => this.setState({ [field]: evt.target.value });
  }

  render(){
    switch (this.state.step) {
    case 1:
      return <FormButton
        onSubmit={this.goToNext}
      />;
    case 2:
      return <FormStep1
        onSubmit={this.goToNext}
        phone={this.state.phone}
        firstname={this.state.firstname}
        lastname={this.state.lastname}
        onPhoneChange={this.handleChange('phone')}
        onFirstNameChange={this.handleChange('firstname')}
        onLastNameChange={this.handleChange('lastname')}
      />;
    case 3:
      return <FormStep2
        onSubmit={this.goToNext}
        city={this.state.city}
        distance={this.state.distance}
        onCityChange={this.handleChange('city')}
        onDistanceChange={this.handleChange('distance')}
      />;
    case 4:
      return <FormSuccess/>;
    }
  }
}

export default FormStart;


class FormSuccess extends Component {

  render(){

  	var successMessage;

		successMessage = 
		<section id="success">
			<p>HellO</p>
		</section>

    return (
    		<div>
    		    <CSSTransitionGroup
	              transitionName="success"
	              transitionEnterTimeout={500}
	              transitionLeaveTimeout={300}>
    			  {successMessage}
    		    </CSSTransitionGroup>
    		</div>
			)
  	}
	}

export default FormSuccess;

＆＃13;

＆＃13;

＆＃13;

我尝试通过触发props.state或将组件调用封装在CSSTransitionGroup上，将FormSuccess组件添加到FormStart。 CSS样式是正确的，因为当我有另一个组件调用结构时它们工作得更早。我究竟做错了什么？谢谢！

Answer 1

尝试使用 react-transitions 它是一个npm包，相当容易使用。当我使用 react-wizard-form

时，它对我有用