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

原创

杨不易呀

发布于 2023-09-30 14:57:10

1940

发布于 2023-09-30 14:57:10

文章被收录于专栏：杨不易呀

前言

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;