doubleyong
管理员
管理员
  • 最后登录2020-12-03
  • 发帖数938
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
阅读:125回复:0

[react]在react中实现双向数据绑定【封装版本】

楼主#
更多 发布于:2020-11-10 16:50
在react中实现一个简单双向数据绑定
参考:http://bugshouji.com/bbs-read-run?tid=1242

如果一个页面表单元素太多,每一个写一个change对应的事件处理方法,重复代码太多,你会发现不同的元素,事件处理程序,只是setState对应的键名不同,那可以考虑封装?[/p][p]思路:全都用一个事件处理程序,传不同的值进去就好了


代码如下:

constructor(){
        super()
        this.changeHandle = this.changeHandle.bind(this);
        this.state={
            name:"",
            pwd:"",
            email:""
        }
    }
render(){
    let {name,pwd,email} = this.state;
    return (
       <div>
           <input data-key="name" onChange={this.changeHandle} value={name}  type="text" />
           <input data-key="pwd" onChange={this.changeHandle}  value={pwd}  type="text" />
           <input data-key="email" onChange={this.changeHandle } value={email}  type="text"/>
           <span>name:{name}</span>
           <span>pwd:{pwd}</span>
           <span>email:{email}</span>
       </div>
    )
}
changeHandle(e){
        e.preventDefault()
        let key = e.target.dataset.key;
        this.setState({[key]:e.target.value})
 }
知识需要管理,知识需要分享
游客


返回顶部

公众号

公众号