1.todolist案例
1)获取标签的内容需要借用ref属性,不直接修改标签的Dom
2)采用b=[...a]或b=a.slice()的方式进行深克隆
3)splice()方法删除元素,第一个参数索引值,第二个参数删除的个数,第三个参数新增项
4)条件渲染 {this.state.list.length==0?<div>暂无待办事项</div>:null},可使用三目运算符
或者使用&&运算符,前面为真则执行后面的,否则不执行
5)条件渲染是动态创建标签的,如果想原来就有,则需要引入css文件,通过设置className的值来动态显示
import React, { PureComponent } from 'react'
import './css/01-index.css'
export default class App extends PureComponent {
myref = React.createRef();
// state={
// list:["aa","bb","cc"]
// }//这种写法无法读取重复元素,写成id索引即可
state={
list:[{
id:1,
text:"1111"
},
{
id:2,
text:"2222"
},
{
id:3,
text:"3333"
}]
}
render() {
return (
<div>
<input ref={this.myref}></input>
<button onClick={()=>{
//不要直接修改状态,可能会造成不可预期的问题
//this.state.list.push(this.myref.current.value);
//let newlist = this.state.list;
//newlist.push(this.myref.current.value);
//js中的赋值为浅克隆,还是会影响引用对象的原始数据
let newlist = [...this.state.list];
newlist.push({
id:Math.random()*1000000,
text:this.myref.current.value
})
this.setState({
list:newlist
});
}}>add1</button>
<ul>
{
this.state.list.map((item,index)=>
<div style={{display:'flex'}} key={item.id}>
<li >{item.text}</li>
<button onClick={()=>{
this.deltext(index);
}}>删除</button>
</div>
)
}
</ul>
{this.state.list.length==0?<div>暂无待办事项</div>:null}
{this.state.list.length==0 && <div>暂无待办事项</div>}
<div className={this.state.list.length==0?'':'hidden'}>暂无待办事项</div>
</div>
)
}
deltext =(index)=>{
//var newlist = [...this.state.list]
//console.log(textid)
//return newlist;
let newlist = this.state.list.slice();
newlist.splice(index,1)
this.setState({
list:newlist
})
}
}