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

前言

React 官方文档：https://reactcommunity.org/react-transition-group/transition

本文主要介绍的就是 Transition 在之前的三种状态会自动触发对应的回调函数，在以后的需求当中可能会有在指定的回调函数当中进行编写对应的业务代码，所以这里只是样式一下它的执行时机。

生命周期方法

• onEnter
• onEntering
• onEntered
• onExit
• onExiting
• onExited

image-20220512183411345

代码语言：javascript复制

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 控制的表单元素

image-20220504133925369

代码语言：javascript复制

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;

image-20220504133742790

受控组件处理技巧

在我们有多个受控组件的时候，这个时候有可能需要编写多个受控组件的处理方法，如果给每一个受控组件绑定一个对应的名称，我们就可以抽离出来一个公共的处理方法处理即可。

代码语言：javascript复制

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;

image-20220504200345721

官方文档

• https://zh-hans.reactjs.org/docs/forms.html#controlled-components

输入图片说明

最后

本期结束咱们下次再见