React小白爬坑笔记（三）TodoList的简单功能

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

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

在函数里面写注释：

//我也是一行注释

降姜~