React小白爬坑笔记(三)TodoList的简单功能
程序员文章站
2022-07-14 20:04:07
...
1.返回的html内容只能包含在一个大的标签中,可以用Fragment标签替代
import React, {Component, Fragment} from 'react';
function TodoList(){
return (
<Fragment>
<div>
<input/>
<button>提交</button>
</div>
<ul>
<li>english</li>
<li>react</li>
</ul>
</Fragment>
// 整体包含在一个大的标签之中
//使用Fragment(需要导入)替代最外层标签可以在实际的html中隐藏掉
)
}
export default TodoList
2. 响应式设计以及事件绑定
onChange,onClick大写!!!
import React, {Component, Fragment} from 'react';
class TodoList extends Component{
constructor(props){
//最优先执行函数
super(props);
//数据都存在state中
this.state = {
inputValue:'',
list:[]
}
}
render() {
return (
<Fragment>
<div>
<input
value={this.state.inputValue}
//将state的值绑定给input
onChange={this.handleInputChange.bind(this)}
// 拿到输入的内容,使用setState绑定回去
/>
<button>提交</button>
</div>
<ul>
<li>english</li>
<li>react</li>
</ul>
</Fragment>
// 响应式设计:不用关注DOM相关的操作,而只需要考虑数据层面的内容
)
}
handleInputChange(e){
this.setState({
inputValue:e.target.value
})
}
}
export default TodoList
为什么我的缩进全没了需要手敲
3. todoList的新增功能
ul得是动态的
<ul>
{
this.state.list.map((item, index)=>{
//list的map方法实现循环
//() => 回调,长得好可爱哈哈哈
//回调函数接受两个内容,item:具体内容;index:下标
return <li key={index}>{item}</li>
//没有key会有警告,但是不会报错可以正常跑
})
}
</ul>
和上面绑定handleInputValue一样,给button绑定一个onClick事件handleBtnClick,记得要bind(this),然后在这个方法里改变list的值。
handleBtnClick(){
this.setState({
list: [...this.state.list, this.state.inputValue],
//...展开运算符,拿出原来list的所有的内容,在生成一个新的数组
inputValue: ''
})
}
4.删除功能
和上面一样,给li标签增加一个onClick删除绑定,函数这样写。注意state的immutable特性。
handleItemDelete(index){
const list = [...this.state.list];
// 拷贝一份
list.splice(index,1);
// 修改拷贝的那一份
this.setState({
list: list
})
// 为啥不直接修改呢?
// 因为有个immutable的概念,state不允许我们做改变,否则之后写扩展容易出错
}
5.一些jsx语法
在Fragment代码块里写注释语法:
{/*我是一行注释*/}
{
//我是单行注释,注意这里要分行,不然}就被注释掉了
}
在函数里面写注释:
//我也是一行注释
降姜~