React双向数据绑定:model改变影响view,view改变反过来影响model

import React,{Component} from 'react';

class Todolist extends Component {
constructor(props) {
super(props);
this.state = {
username:""
};
}
inputChange=(e)=>{
this.setState({
username:e.target.value
}) }
setUsername=()=>{
this.setState({
username:'李四'
}) }
render() {
return (
<div>
<h2>双休数据绑定</h2><input value={this.state.username} onChange={this.inputChange}/>
<p> {this.state.username}</p>
<button onClick={this.setUsername}>改变username的值</button>
</div>
);
}
} export default Todolist;

使用 map 渲染列表数据

JSX 的表达式插入 {} 里面可以放任何数据

用户数据的 JSX 结构抽离成一个组件 User ,并且通过 props 把 user 数据作为组件的配置参数传进去;这样改写 Index 就非常清晰了,看一眼就知道负责渲染 users 列表,而用的组件是 User

const users = [
{ username: 'Jerry', age: , gender: 'male' },
{ username: 'Tomy', age: , gender: 'male' },
{ username: 'Lily', age: , gender: 'female' },
{ username: 'Lucy', age: , gender: 'female' }
] class User extends Component {
render () {
const { user } = this.props
return (
<div>
<div>姓名:{user.username}</div>
<div>年龄:{user.age}</div>
<div>性别:{user.gender}</div>
<hr />
</div>
)
}
} class Index extends Component {
render () {
return (
<div>
{users.map((user, i) => <User key={i} user={user} />)}</div>
)
}
} ReactDOM.render(
<Index />,
document.getElementById('root')
)

React(6) --双向数据绑定及列表数据循环的更多相关文章

  1. react 的双向数据绑定

    学习过angular和vue的人都知道,它俩在实现双向数据绑定都是有一个专门的内置指令ngModel和v-model 但是在react中没有这些. 所以我们在react中想要实现双向数据绑定要调用一个 ...

  2. angular 双向数据绑定与vue数据的双向数据绑定

    二者都是 MVVM 模式开发的典型代表 angular 是通过脏检测实现,angular 会将 UI 事件,请求事件,settimeout 这类延迟的对象放入到事件监测的脏队列,当数据变化的时候,触发 ...

  3. React简单实现双向数据绑定

    import React, { Component } from 'react' import ReactDOM from 'react-dom' class App extends Componen ...

  4. vue 双向数据绑定的实现学习(一)

    前言:本系列学习笔记从以下几个点展开 什么是双向数据绑定 双向数据绑定的好处 怎么实现双向数据绑定 实现双向数据数据绑定需要哪些知识点 数据劫持 发布订阅模式 先看看我们要实现的目标是什么,如下动图: ...

  5. vue学习笔记(二)- 数据绑定、列表渲染、条件判断

    vue的数据绑定和列表渲染的造轮子 GitHub:八至 作者:狐狸家的鱼 双向数据绑定 Vue中数据的双向绑定-v-model 数据->页面 页面->数据 适用:input.select. ...

  6. angular和vue双向数据绑定

    angular和vue双向数据绑定的原理(重点是vue的双向绑定) 我在整理javascript高级程序设计的笔记的时候看到面向对象设计那章,讲到对象属性分为数据属性和访问器属性,我们平时用的js对象 ...

  7. Vue中双向数据绑定是如何实现的?

    vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的, 也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变:核心:关于VUE双向数据绑定,其核心是 Ob ...

  8. angular,vue,react的基本语法—双向数据绑定、条件渲染、列表渲染、angular小案例

    基本语法: 1.双向数据绑定 vue 指令:v-model="msg" react constructor(){ this.state{ msg:"双向数据绑定" ...

  9. Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定

    Angular4.x 创建组件|绑定数据|绑定属性|数据循环|条件判断|事件|表单处理|双向数据绑定 创建 angular 组件 https://github.com/angular/angular- ...

随机推荐

  1. w = tf.Variable(<initial-value>, name=<optional-name>)

    w = tf.Variable(<initial-value>, name=<optional-name>)

  2. 030:spaceless和autoescape 标签

    1.spaceless 标签: spaceless 标签:移除html标签中的空白字符.包括空格.tab键.换行等.示例代码如下: {% spaceless %} <p> <a hr ...

  3. [洛谷 P1377] TJOI2011 树的序

    问题描述 众所周知,二叉查找树的形态和键值的插入顺序密切相关.准确的讲:1.空树中加入一个键值k,则变为只有一个结点的二叉查找树,此结点的键值即为k:2.在非空树中插入一个键值k,若k小于其根的键值, ...

  4. Jmeter的JDBC请求执行多条SQL语句

    注:有mysqlconnector/j 3.1.1以上版本才支持执行多条sql语句 1.     下载jdbc驱动为了连接Mysql数据库,还需要有个jdbc驱动:mysql-connector-ja ...

  5. NVMe固态硬盘工具箱使用说明

    https://www.bilibili.com/read/cv562989/ 浦科特NVMe固态硬盘工具箱使用说明 数码 2018-6-7 687阅读7点赞3评论 浦科特已经推出针对NVMe固态硬盘 ...

  6. Linux下安装Harbor 1.8.0 仓库的安装和使用(亲测)

    根据Harbor官方描述: Harbor是一个用于存储和分发Docker镜像的企业级Registry服务器,通过添加一些企业必需的功能特性,例如安全.标识和管理等,扩展了开源Docker Distri ...

  7. 20180712-Java Character类

    char ch = 'a';// Unicode for uppercase Greek omega characterchar uniChar = '\u039A';//字符数组char[] cha ...

  8. 制作自己的win7系统

    每次安装完纯净版的系统,然后是漫长的打补丁,装驱动,装软件.不妨制作一个自己的系统光盘(也就是GHOST系统),再要重装系统时,直接用这个系统光盘,一键安装,方便省时. 制作GHOST系统,就是将本地 ...

  9. python自定义异常实例详解

    python自定义异常实例详解 本文通过两种方法对Python 自定义异常进行讲解,第一种:创建一个新的exception类来拥有自己的异常,第二种:raise 唯一的一个参数指定了要被抛出的异常 1 ...

  10. EasyUI:Cannot read property 'width' of null

    最近在使用EasyUI DataGrid来做前端的报表开发,遇到了这个报错: Uncaught TypeError: Cannot read property 'width' of null 在网上查 ...