反应将过渡/动画添加到向导表单

Question

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

我试过使用CSSTransitionGroup.

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

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;

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

Answer 1

尝试使用反应转换它是一个 npm 包，相当易于使用。当我使用反应向导形式时，它对我有用