枯燥的React 实现todolist（技术胖笔记）

Xiaojiejie.js

import axios from 'axios'// npm  install -save axios 安装
import React,{Component,Fragment} from 'react'
import './style.css'
import XiaojiejieItem from './XiaojiejieItem'
import Boss from './Boss'
import{CSSTransition,Transition,TransitionGroup} from 'react-transition-group'//控制多dom

import './style.css’引入js

输入框

<div>
                    <label htmlFor="jspang">增加服务</label>
                    <input 
                            id="jspang"
                            className="input"
                            value={this.state.inputValue} 
                            onChange = {this.inputChange.bind(this)}
                            ref={(input)=>{this.input = input}}
                    />    
                            {/*class必须写成className*/}
                    <button onClick={this.addList.bind(this)}>增加服务</button>
                </div>
//----------------   inputChange
inputChange(){
        this.setState({
            inputValue:this.input.value 
        })
    }

htmlFor就等于for属性。即，点击label会聚焦到id 为jspang的input上。

onChange = {this.inputChange.bind(this)},后续要用到该函数，必须要bind绑定。

ref={(input)=>{this.input = input}}
给input定义一个ref属性，此时this.input在这个组件就表示了这个input。在inputChange这个函数中，this.input.value就表示了输入框里面的值。

服务展示

<div>
 <ul  ref={(ul)=>{this.ul=ul}}>
                    <TransitionGroup>
                    {
                        this.state.list.map((item,index)=>{
                            return (
                                <CSSTransition
                                    timeout={2000}
                                    classNames='boss-text'
                                    unmountOnExit
                                    appear={true}
                                    key={index+item}
                                >
                                    <XiaojiejieItem 
                                    key={index+item}
                                     content={item}//传入值。
                                     index={index}
                                     list={this.state.list}
                                     deleteItem = {this.deleteItem.bind(this)}//不使用bind 绑定this，功能中的this是undefined
                                     />
                                </CSSTransition>
                            )
                        })
                    }
                    </TransitionGroup>
                </ul>
                 <Boss />
            </div>
            </Fragment>

此ref与上个一个同理，即绑定ul

 inputChange(){
        console.log(this.input.value)
        this.setState({//不能直接操作this.state.
            inputValue:this.input.value 
        })
    }
    //增加列表
    addList(){
        this.setState({
            list:[...this.state.list,this.state.inputValue],//利用解构法，添加新元素到最后。
            inputValue:''//再让输入框无内容。
        },()=>{//利用回调函数，才能实时更新数据
            console.log(this.ul.querySelectorAll('li').length)
        })
        
    }
    //删除列表项
    deleteItem(index){
        console.log(index)
        let list = this.state.list//this.state.list不能直接使用。
        list.splice(index,1)
        this.setState({
            list:list
        })
    }
}
export default Xiaojiejie//每个引用文件都需要暴露出来。

react-transition-group

安装react-transition-group

终端写入 npm install react-transition-group --save

import{CSSTransition,Transition,TransitionGroup} from 'react-transition-group'//控制多dom

 <CSSTransition //
                    in={this.state.isShow}//控制出现和隐藏
                    timeout={2000}//持续时间   单位毫秒
                    classNames="boss-text"//区分css的前缀  classNames
                	unmountOnExit//表示在元素退场时，自动把DOM也删除，这是以前用css动画没法做到的
                	appear={true}//出现的时候就有动画效果。
                    key={index+item}//循环需要每个key值不一样
                >

style.css

.input{
    border: 3px solid #ae7000;
}
/*xxxxx - enter{} 入场*/
/*xxxx -enter-active {} 入场到结束的过程*/
/*xxxx -enter-done{}入场结束*/
/*xxxxx - exit{} 出场*/
/*xxxx -exit-active {} 出场到结束的过程*/
/*xxxx -exit-done{}出场结束*/
.boss-text-enter{opacity: 0;}
.boss-text-enter-active{opacity: 1; transition: opacity 2000ms;}
.boss-text-enter-done{opacity: 1;}
.boss-text-exit{opacity: 1;}
.boss-text-exit-active{opacity: 0; transition: opacity 2000ms;}
.boss-text-exit-done{opacity: 0;}

XiaojiejieItem.js

引入文件

import React, { Component } from 'react';
import propTypes from 'prop-types'

propTypes用来检验传入数据的类型是否正确，。

XiaojiejieItem.propTypes = {//校验传递的值
    avname:propTypes.string.isRequired,//这样写 avname就必须要传值。
    content:propTypes.string,
    index:propTypes.number,
    deleteItem:propTypes.func
}
XiaojiejieItem.defaultProps={//默认参数
    avname:'三上悠亚'
}

固定格式

class XiaojiejieItem extends Component {
    constructor(props){
        super(props)
        this.handleClick = this.handleClick.bind(this)
    }

渲染优化（！！！！！！！）

 shouldComponentUpdate(nextProps,nextState){//发生在render之前。组件优化。
        if(nextProps.content!==this.props.content){
            return true
        }
        return false;
    }



render() { 
        console.log('child-render')
        return (
             <li onClick={this.handleClick}>
                 {this.props.avname}为您作-{this.props.content}   {/*avname可传可不传  ，this.props就是引用传入的值*/}
            
            </li>
        );
    }
    handleClick(){
        this.props.deleteItem(this.props.index);
    }
}

Boss.js

import React, { Component } from 'react';//等于import React from 'react'     const Component = React.Component
import { CSSTransition, Transition, TransitionGroup } from 'react-transition-group';//react官方动画库
class Boss extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            isShow:true
        }
        this.toToggole = this.toToggole.bind(this)
    }
    render() { 
        return (
            <div>
                <CSSTransition //
                    in={this.state.isShow}//控制出现和隐藏
                    timeout={2000}//持续时间   单位毫秒
                    classNames="boss-text"//区分css的前缀  classNames
                >
                <div className>
                    Boss级人物 ----孙悟空
                </div>
                </CSSTransition>
                <div><button onClick={this.toToggole}>召唤Boss</button></div>
            </div>
        );
    }

    toToggole(){
        this.setState({
            isShow:this.state.isShow?false:true//利用三目运算符，来实现反复。
        })
    }
}
 
export default Boss;