React初学者指南-优快云博客

本文链接：https://blog.youkuaiyun.com/axibadexiang/article/details/80882677

今天开始学习了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（{}）方法来使用

初探react