React实现双向绑定

class LoginPhone extends Component{

    state={
        phoneNo:'123450',
        phoneCode:'1234'
    }

    render() {
        return(
            <div>
                <div>
                    <input className="login_index_box_input" 
                           placeholder="请输入手机号"
                           onChange={(e)=>this.setState({phoneNo:e.target.value})} 
                           onInput={(e)=>this.setState({phoneNo:e.target.value})} 
                           type="text" 
                           value={this.state.phoneNo}/>
                </div>
                <div>
                    <input className="login_index_box_input" 
                           placeholder="请输入验证码" 
                           onChange={(e)=>this.setState({phoneCode:e.target.value})} 
                           onInput={(e)=>this.setState({phoneCode:e.target.value})} 
                           type="text" 
                           value={this.state.phoneCode} />
                </div>
            </div>
        )
    }


}

读取数据：

 onChange={(e)=>this.setState({phoneCode:e.target.value})} 
 onInput={(e)=>this.setState({phoneCode:e.target.value})} 

设置数据：

value={this.state.phoneCode} 

我只能简化到这样子了，再怎么搞也封装不成vue v-model的样子😢😢😢

还有更简单的不？