初探react

今天开始学习了react，写此博客记录一些笔记

import React ,{ Component, Fragment} from 'react'

class TodoList extends Component {

constructor( props){

super( props);

this. state = {

inputVale: '',

list:[]

}

}

render(){

return(

< Fragment >

< div >

< input

value= {this. state. inputVale }

onChange= {this. handleInputChange. bind( this) }

/>

< button >提交 </ button >

</ div >

< ul >

< li ></ li >

</ ul >

</ Fragment >

)

}

handleInputChange( e){

// console.log(e.target.value)

// console.log(this)

this. setState({

inputVale:e. target. value

})

}

}

export default TodoList;

实现一个input的数据的双向绑定。这里与我们vue中的双向绑定有所不同。这里的稍微有点小复杂。首先你要创建一个构造函数，里面传一个参数props，然后调用super方法，他继承于React.Conponent。input中的值绑定也是用的jsx语法{}而不是“”，如果想双向绑定数据，得给input加一个事件onChang。然后在在render下面去实现这个方法。注意在方法中this得指向并不是todolist本身，所以在事件后面用到es6的bind方法，来实现this指向todolist。并且在方法中去绑定数据也不是this。state =。。。React中给我们提供了setState（{}）方法来使用