react里面实现双向数据绑定(类似于vue的v-model)

我之前的一篇文章里,介绍过vue里面v-model的实现.我们都知道react和vue有一个最明显的区别,就是react没有其生态下的指令,没有双向数据绑定,但实际情况下如果想实现vue那种v-model的效果也是可以的,前提是利用好react的事件机制

import React, { Component } from "react";

class App extends Component {
    constructor(){
        super();
        this.state = {
            count: 1
        }
    }
//给input框添加change事件
    render() {
        return (
        <div>
            <h1>count: {this.state.count}</h1>
            <input type="number" onChange={this.handleChangeCount}/>
        </div>
        );
    }

    //写事件  handleChangeCount
    handleChangeCount = (event) => { 
        this.setState({ count: event.target.value })
    }

}

export default App;

这样就基本可以达到vue里面v-model的效果

下一篇讲述,webpack如何打包多页面应用