欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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代码块里写注释语法:

{/*我是一行注释*/}
{
//我是单行注释,注意这里要分行,不然}就被注释掉了
}

在函数里面写注释:

//我也是一行注释

降姜~