前言
React 官方文档：https://reactcommunity.org/react-transition-group/transition
本文主要介绍的就是 Transition 在之前的三种状态会自动触发对应的回调函数，在以后的需求当中可能会有在指定的回调函数当中进行编写对应的业务代码，所以这里只是样式一下它的执行时机。
生命周期方法
- onEnter
- onEntering
- onEntered
- onExit
- onExiting
- onExited
import React from 'react'; import './App.css' import {CSSTransition} from 'react-transition-group'; class App extends React.Component { constructor(props) { super(props); this.state = { isShow: true } } render() { return ( <div> <CSSTransition in={this.state.isShow} classNames={'box'} timeout={3000} unmountOnExit={true} appear onEnter={ console.log('进入动画开始之前') } onEntering={ console.log('进入动画执行过程中') } onEntered={ console.log('进入动画执行完毕') } onExit={ console.log('退出动画开始之前') } onExiting={ console.log('退出动画执行过程中') } onExited={ console.log('退出动画执行完毕') } > <div/> </CSSTransition> <button onClick={() => { this.setState({ isShow: true }) }}>显示 </button> <button onClick={() => { this.setState({ isShow: false }) }}>隐藏 </button> </div> ); } } export default App;
受控组件
- 值受到 react 控制的表单元素
import React from "react"; class App extends React.PureComponent { constructor(props) { super(props); this.state = { name: 'yangbuyiya' } } render() { return ( <form> <input type="text" value={this.state.name} onChange={(e) => { this.change(e); }}/> </form> ) } change(e) { console.log(e.target.value); this.setState({ name: e.target.value }); } } export default App;
受控组件处理技巧
在我们有多个受控组件的时候，这个时候有可能需要编写多个受控组件的处理方法，如果给每一个受控组件绑定一个对应的名称，我们就可以抽离出来一个公共的处理方法处理即可。
import React from 'react'; class App extends React.PureComponent { constructor(props) { super(props); this.state = { name: 'yangbuyiya', email: '303158131@qq.com', phone: '18819522032' } } render() { return ( <form> <input type="text" value={this.state.name} name={'name'} onChange={(e) => { this.change(e) }}/> <input type="email" name={'email'} value={this.state.email} onChange={(e) => { this.change(e) }}/> <input type="number" name={'phone'} value={this.state.phone} onChange={(e) => { this.change(e) }}/> </form> ) } change(e) { this.setState({ [e.target.name]: e.target.value }) } } export default App;
官方文档
最后
本期结束咱们下次再见👋~
🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗
