今天复习React的双向绑定的时候遇到了一个问题,首先我们来看我写的双向绑定代码

import React, { Component } from 'react'
class Test extends Component {
constructor(props) {
    super(props)
    this.state = {
        inputValue: 'test value',
            list: []
        }
    }
    render() {
        return (
            <div>
                <div>
                    <input type='text' value=    {this.state.inputValue} onChange=    {this.inputChange.bind(this)} />
                </div>
            </div>
        )
    }
    inputChange(e){
        this.setState({
            inputValue : e.target.value
        })
        console.log(this.state.inputValue)
    }
}
export default Test

运行一下>

屏幕快照 2019-07-10 下午3.36.24.png

乍一看是一点问题都没有，但是我发现我输入了三个a，但是控制台只输出两个a！于是我回过头检查我的代码，因为简单的双向绑定内容确实不多，讲道理应该不会出现问题。研究无果，不得不求助大佬。于是打开百度。
还真让我给找到了，大佬博客，原来是this.setState的问题，大佬详细讲了原因以及解决方案。

解决我想要的效果最快的方法就是回调函数，以下是修改过后的inputChange()函数的部分。

inputChange(e){
    this.setState({
        inputValue : e.target.value
    },()=>{
        console.log(this.state.inputValue)
    })
}

效果

更深入的学习请看大佬的博客的内容，本内容旨在记录个人学习中遇到的问题。