React 中双项绑定

  React 中双项绑定,文本输入框的值,不能用 this.props.value 读取,而要定义一个 onChange 事件的回调函数,通过 event.target.value 读取用户输入的值。

  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React--表单双项绑定</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="build/browser.min.js"></script>
</head>
<body>
    <div id="app"></div>
</body>
</html>
<script type="text/babel">
    // 文本输入框的值,不能用 this.props.value 读取,而要定义一个 onChange 事件的回调函数,
    // 文本框在react中不能使用,传统的获取方法。使用事件源  event.target.value
    let Hello = React.createClass({         // 创建组件类
        // 设置state的初始值
        getInitialState(){
            return{
                name:"Hello world!",
            }
        },

        // 通过 event.target.value 读取用户输入的值
        fn(ev){
            this.setState({
                title:ev.target.value
            })
        },

        render() {
            return(     // 写在return中的是模板 用jsx语法
                // 模板中只有一个顶层标签   注释不能写在jsx语法中
                <div>
                    <input type="text" onChange={this.fn}/>
                    <p>{this.state.title}</p>
                </div>
            )
        }
    });

    // 渲染到页面
    ReactDOM.render(<Hello name="zhangsan" url="http://www.baidu.com">

                    </Hello>,document.getElementById("app"));
</script>

原文地址:https://www.cnblogs.com/461770539-qq/p/9390142.html

时间: 2024-10-07 12:16:17

React 中双项绑定的相关文章

Centos7双网卡绑定

(一)简述1.双网卡绑定技术在centos7中使用了teaming技术,而在rhel6/centos7中使用的是bonding技术,在centos7中双网卡绑定既能使用teaming也可以使用bonding,这里推荐使用teaming技术,方便与查看和监控. 原理这里介绍两种最常见的双网卡绑定模式:(1) roundrobin - 轮询模式所有链路处于负载均衡状态,这种模式的特点增加了带宽,同时支持容错能力.(2) activebackup - 主备模式一个网卡处于活动状态,另一个处于备份状态,

react中元素事件传入参数写法

react中的元素绑定事件并且传入参数,不能使用箭头函数,否则传参会立即调用 错误写法:页面刷新会立即调用 <li key={index+item} onClick={this.deleteItem(index)} > {item} </li> deleteItem = (index) => { console.log(index) } 正确写法:click的时候才会调用 <li key={index+item} onClick={this.deleteItem.bin

React组件方法中为什么要绑定this

React组件方法中为什么要绑定this 如果你尝试使用过React进行前端开发,一定见过下面这样的代码: //假想定义一个ToggleButton开关组件 class ToggleButton extends React.Component{ constructor(props){ super(props); this.state = {isToggleOn: true}; this.handleClick = this.handleClick.bind(this); this.handleC

redhat 双网卡绑定中遇到的问题及解决

redhat 5.5 双网卡绑定后测试失败,现象为拔线不切换,cat /proc/net/bonding/bond0 网卡始终up, ifconfig 有与XEN有关的信息: 经查与XEN有关系 #chkconfig xend off #chkconfig xendomains off #chkconfig libvirtd off #reboot OK 一切都正常了

Linux下双网卡绑定(bonding技术)

http://www.cnblogs.com/qmfsun/p/3810905.html Linux网卡绑定探析 2013-08-20 15:39:31 现在很多服务器都自带双千兆网口,利用网卡绑定既能增加网络带宽,同时又能做相应的冗余,目前应用于很多的场景.linux操作系统下自带的网卡绑定模式,Linux bonding驱动提供了一个把多个网络接口设备捆绑为单个网络接口设置来使用,用于网络负载均衡及网络冗余.当然现在网卡产商也会出一些针对windows操作系统网卡管理软件来做网卡绑定(win

Linux双网卡绑定脚本

linux运维及配置工作中,常常会用到双网卡绑定,少数几台服务器的配置还好,如果是需要配置几十甚至上百台,难免会枯燥乏味,易于出错,我编写了这个双网卡绑定的辅助脚本,可傻瓜式地完成linux双网卡绑定工作,当然,该脚本主要还是用于小批量的系统配置,如需配置大量的服务器,可提取脚本中的bonding函数,稍作修改即可,你值得一试! 1.适用范围 该shell脚本可在以下linux系统创建多个绑定网卡,用于生产环境没问题的: Redhat 5.x CentOS 5.x Kylin 3.x KUX 2

React中事件的处理

React 中使用 onClick 类似的写法来监听事件,注意 this 绑定问题 React 里严格遵循单项数据流,没有数据双向绑定,所以要处理两件事,第一是元素本身值的赋值,第二是值改变以后的事件,例如输入框需要设置 value 和 onChange . 1.在 src -> components 文件夹中,再新建 CartSample.js ,具体代码如下: import React, { Component } from 'react'; export default class Car

双网卡绑定

双网卡绑定好处: 1:实现网络容错(主备模式 , 主主模式) 2:  带宽绑定 在windows   server  2012之前系统必须利用服务器商家提供的软件,windows   server  2012之后,操作系统自身可以实现双网卡绑定 准备条件:2块网卡 步骤: 1:打开服务器管理器-本地服务器-NIC组合 点击任务-新建组 选中要绑定的网卡-其他属性的成组模式改成静态成组 打开网络连接,出现新的虚拟网卡,点击右键-配置ip地址,首选dns指向server01ip地址 3:测试 (测试

深入理解react中的虚拟DOM、diff算法

文章结构: React中的虚拟DOM是什么? 虚拟DOM的简单实现(diff算法) 虚拟DOM的内部工作原理 React中的虚拟DOM与Vue中的虚拟DOM比较 React中的虚拟DOM是什么?   虽然React中的虚拟DOM很好用,但是这是一个无心插柳的结果.   React的核心思想:一个Component拯救世界,忘掉烦恼,从此不再操心界面. 1. Virtual Dom快,有两个前提 1.1 Javascript很快  Chrome刚出来的时候,在Chrome里跑Javascript非