文档章节

React基于事件委托的快速双向绑定

陆幽轩
 陆幽轩
发布于 2017/06/27 11:55
字数 407
阅读 76
收藏 0

在解决React双向绑定的时候,网上的代码要不就用乱七八糟的库,要么就handleChange一个组件一个组件慢慢写,非常麻烦。这里给出一个比较简单的办法:

事件冒泡模型是我们都耳熟能详的,在这里我们就用到了事件冒泡。**在底层一个不知道名称的input发生了onchange事件,那个这个事件可以冒泡到顶层的某个div或者别的DOM元素当中。**这个方法的解决思路就是,只需要捕获顶层元素的onChange事件,根据他的event.target就能知道是哪个input发生了变化。

我们先写了一个工具函数:

// This function can bind a form with a state in component(key -> name)

// usage like:
// import FormChangeBind from '../assisst/changeForm.js'
// <Form className="inbox" ref='loginForm' onChange={FormChangeBind.bind(this)}>
// and use name in your form:
// <Input type="text" placeholder="请输入用户名" name="username"></Input>
// when you change the form ,you can clearly see some change in your state in component
// enjoy

export default function changeForm(event) {
    event.persist();
    this.setState(state => {
        state[event.target.name] = event.target.value;
        if (event.target.type == "checkbox") {
            state[event.target.name] = event.target.checked;
        }
    });
}

在组件中的Render中的代码如下:

<Form className="inbox" ref='loginForm' onChange={FormChangeBind.bind(this)}>
    <label className="controlLabel">用户名</label>
    <Input type="text" placeholder="请输入用户名" name="username"></Input>
    <label className="controlLabel">密码</label>
    <Input type="password" placeholder="请输入密码" name="password"></Input>
    <div className="formline">
        <Checkbox name="rememberMe"></Checkbox>
        <label htmlFor="">记住我</label>
        <a className="fr" href="#">忘记密码</a>
    </div>
    <div className="divider"></div>
    <a className="btn primary" onClick={this.clickLogin.bind(this)}>登录</a>
    <a className="btn second" href="#">注册</a>
</Form>

构造函数中制定state内容和input的name保持一致:

constructor() {
  super();
  this.state = {
    username: '',
    password: '',
    rememberMe: false
  }
}

© 著作权归作者所有

上一篇: 理解卷积
下一篇: Tensorflow入门笔记
陆幽轩
粉丝 2
博文 7
码字总数 9951
作品 0
杭州
程序员
私信 提问
你需要了解的 react 事件处理和绑定方法

1、事件处理 先看一个 demo 可以看到 React 里面绑定事件的方式和在 HTML 中绑定事件类似,使用驼峰式命名指定要绑定的 onClick 属性为组件定义的一个方法 {this.handleClick.bind(this)}。 ...

Pandaaa
04/30
0
0
Vue和React数据绑定对比

在数据绑定上来说,vue的特色是双向数据绑定,而在react中是单向数据绑定。 一 单向和双向数据绑定其实不是完全没关系的 表单的双向绑定,说到底不过是 (value 的单向绑定 + onChange 事件侦...

pattyzzh
2018/05/14
0
0
react事件机制和原生dom事件机制之男女有别

今天遇到这么一个问题: 我们在实现列表拖拽排序时使用了react-sortable-hoc这个库,确实很好用,利用ES装饰器新特性,几个@符号就解决了。但是因为我们在每一个列表item上还有菜单按钮,点击...

牧羊童鞋
2017/12/08
0
0
深入解析React数据传递之组件内部通信

这篇文章主要介绍了React数据传递之组件内部通信的方法,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。 1. 概述 脱离初级前端一段...

前端攻城小牛
2018/12/31
0
0
在 Angular 中使用 React 组件的开源库--NgReact

React.js库可以用作Web应用程序中的视图组件。 ngReact 让你可以在 AngularJS 应用程序中使用 React 组件。 作用: 您需要比 Angular 更高的性能,而由于虚拟 DOM 和其他优化,React通常性能...

匿名
2017/06/16
62
0

没有更多内容

加载失败,请刷新页面

加载更多

Django笔记-3-模型-20190526

简介 django为各种数据库提供了很好的支持,django对这些数据库提供了统一的调用API;可以根据不同的也无需求选择不同的数据库; 配置数据库 在setting.py文件中配置数据库 DATABASES = { ...

Frank1126lin
16分钟前
0
0
OSChina 周日乱弹 —— 程序员做噩梦

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @-冰冰棒- :#今日歌曲推荐# 手嶌葵《Kiss The Girl》 《Kiss The Girl》- 手嶌葵 手机党少年们想听歌,请使劲儿戳(这里) @Sharon啊 :今天...

小小编辑
49分钟前
114
6
Another app is currently holding the yum lock; waiting for it to exit...

Another app is currently holding the yum lock; waiting for it to exit... The other application is: PackageKit Memory : 153 M RSS (266 MB VSZ) Started: Thu Jul 12 00:03......

圣洁之子
57分钟前
2
0
FastDateFormat 研究

FastDateFormat 对缓存的利用,其实就是用ConcurrentHashMap 做了一个map类型的缓存 public F getInstance(final String pattern, TimeZone timeZone, Locale locale) { Validate......

暗中观察
今天
3
0
Android双向绑定原理简述

Android双向绑定原理简述 双向绑定涉及两个部分,即将业务状态的变化传递给UI,以及将用户输入信息传递给业务模型。 首先我们来看业务状态是如何传递给UI的。开启dataBinding后,编译器为布局...

tommwq
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部