react学习2

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