props，state与render函数的关系
react,父组件的state中的变量改变，则相应的render函数也会执行，返回新的视图，同时父组件的子组件通过props获取父组件的state的变量，当父组件的state状态改变的时候同时也会出发子
组件的render函数执行。
react ref的使用，vue中在html标签中设置ref,就可以操作该dom元素，react也是
TodoList:
import React,{Component,Fragment} from 'react'
import './style.css'
import TodoItem from './TodoItem'
class TodoList extends Component{
constructor (props) {
super(props)
this.state = {
inputValue:'' ,
list:[]
}
this.handleInputChange = this.handleInputChange.bind(this)
this.handlBtnClick = this.handlBtnClick.bind(this)
}
render () {
return (<Fragment>
<div>
{/*下面是input框*/}
<label htmlFor='arear'>输入内容</label>
<input value = {this.state.inputValue}
id='arear'
onChange = {this.handleInputChange}
className= 'input'
ref={(input) =>{this.input = input}}//这里设置ref是用es6函数定义ref这样就能够操作input标签通过this.input
/>
<button onClick = {this.handlBtnClick}>提交</button>
</div>
<ul>
{
this.state.list.map((item,index) => {
return (
<TodoItem content = {item}
key = {index}
index = {index}
deleteItem = {this.handleDelete.bind(this)}
/>
)
})
}
</ul>
</Fragment>
)
}
handleInputChange (e) {
//const value = e.target.value
const value = this.input.value // 这里通过ref操作dom获得input的value值不过尽量不操作dom,setState和ref使用时候，会出坑，因为setState 是异步的需要在红色箭头函数执行相应的代码
才能正确的显示所要的结果
this.setState((e) =>({
inputValue:value
}),() =>{
}
)
}
handlBtnClick () {
this.setState((prevState) =>({
list:[prevState.list,prevState.inputValue],
inputValue:''
}))
/* this.setState({
list:[...this.state.list,this.state.inputValue],
inputValue:''
})*/
}
handleDelete (index) {
const list = [...this.state.list];
list.splice(index,1);
this.setState(() =>({
list
}))
/* this.setState({
list
})*/
//console.log(index)
}
}
export default TodoList