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;