react+material-ui制作todolist问题总结

发表于   |   分类于

前言

作为一个react的小白，今天在写我的第一个demo—todolist遇到了一些状况。发现每次点击提交按钮后都会有一个刷新，会把state重置。就这个让我废了一番功夫，今天就来总结一下关于state的问题。

解决方案

首先，要解决之前的问题，第一个方法就是将button中的type="submit"去掉。直接通过绑定的click方法去setState，这样就不会重置state了。第二个方法就是在提交的点击方法中添加e.preventDefault()，它会阻止提交表单的默认行为，防止了因为submit造成的刷新。还有一种就是将信息持久化存储，最简单的是存储在localStorage中。

state的使用

官网中提到了正确使用State的三件事
1.不要直接修改State
2.state的更新可能是异步的
3.state的更新会被合并
其主要讲述的是如何使用setState()。
1.修改state时需要使用setState()进行修改。
2.由于this.props和this.state可能会异步更新，所以不要依赖它们的值来更新状态，可以通过setState接收一个函数的方式来更新，参数就是state与props.
3.react会合并多个setSstate调用合并成一个调用，所以可以把每个不同的state分开设定。

遇到的其他问题

删除的实现

onClick={this.delList.bind(this,value.id)}
在子组件中传参value.id

1
this.state.list.filter((item)=>![index].includes(item.id))

过滤掉包含该id的选项

出现input框中无法输入英文数字等

这个问题比较emm…原来是因为我设置了onKeyDown。
之前在使用的时候，为了防止回车按下后刷新，使用了preventDefault，但是放在判断之外导致只要检测到有按键按下就会阻止。

1
2
3
4
5
6
7
8
9
10
<!-- 之前的写法 -->
onKeyDownChange(e){
	e.preventDefault();
	if(e.keyCode === 13){
		this.addItem();
		this.setState({
			targetValue: '';
		})
	}
}

更改后如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
onKeyDownChange(e){
	if(e.keyCode === 13){
	  e.preventDefault();
	  this.addItem();
	  this.setState({
	    targetValue: ''
	  })
	}else{
	  this.setState({
	    targetValue: e.target.value,
	  })
	}
}

这样就好了XD