React-组件-Transition回调函数和React-组件-受控组件

2023-10-11 51

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： React-组件-Transition回调函数和React-组件-受控组件

前言

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;