React 从入门到进阶之路(五)
之前的文章我们介绍了 React 事件,方法, React定义方法的几种方式 获取数据 改变数据 执行方法传值。接下来我们将介绍 React 表单事件 键盘事件 事件对象以及 React中 的 ref 获取 dom 节点 、双向数据绑定,约束性和非约束性组件。
import React, {Component} from 'react'; class Home extends Component {
constructor(props) {
super(props);
this.state = {
name: "zhangsan",
}; } getData = (event) => {
console.log(this.state.name);
event.target.style.color = "red";
} // event
inputChange1 = (event)=>{
this.setState({
name: event.target.value
})
} // ref
inputChange2 = ()=>{
this.setState({
name: this.refs.name.value
})
} // 键盘事件
inputChange3 = (event)=>{
console.log(event.keyCode)
} inputGet = () =>{
console.log(this.state.name)
} render() {
return (
<div>
<p>Hello {this.state.name}</p> <button onClick={this.getData}>获取event</button> <br/><br/> {/*event*/}
<input onChange={this.inputChange1} type="text"/>
<button onClick={this.inputGet}>获取input值</button> <br/><br/> {/*ref*/}
<input ref="name" onChange={this.inputChange2} type="text"/>
<button onClick={this.inputGet}>获取input值</button> <br/><br/> {/*键盘事件*/}
<input onKeyUp={this.inputChange3} type="text"/>
<button onClick={this.inputGet}>获取input值</button> <br/><br/> {/*value defaultValue*/}
<input value={this.state.name} onChange={this.inputChange1} type="text"/>
<input defaultValue={this.state.name} onChange={this.inputChange1} type="text"/>
</div>
);
}
} export default Home;
在调用 getData 的方法时传值 event,就可以获取到该元素的原生 DOM 属性,我们可以对其进行操作,如改变元素颜色:event.target.style.color = "red";
在 React 中并没有提供类似于 Vue 中 model 的双向数据绑定,所以我们得自己来写,在 input 框中输入内容时我们可以根据 onChange 事件实时获取 input 框中的内容,再通过 event 事件获取到原生 DOM 里面的 value 值再赋给 this.state 中的数据,既可以达到双向数据绑定的目标。
当然 React 提供了类似于 Vue 的 ref 属性,我们同样可以通过 ref 绑定属性名,然后通过 refs 获取到该属性名,就能获取到 input 框的 value 值。然后达到双向数据绑定的目标。
React 中同样为我们提供了键盘事件 onKeyUp 和 onKeyDown ,我们可以根据该事件达到双向数据绑定的目标。
在 input 框最初赋值时可以有 value 和 defaultValue 两种赋值方式,
defaultValue 是原生 DOM 中的 value 属性,可以是一个死值,也可以是 this.state 中的数据,React 不会去管它。这样的组件叫做非约束性组件。
value 是 React 中的一个属性,它的值可以是一个死值,也可以是 this.state 中的数据, 但是需要通过 onChange 事件配合使用,如果不写 onChange 事件会报错。这样的组件叫做非约束性组件。
最后运行结果为:
React 从入门到进阶之路(五)的更多相关文章
- React 从入门到进阶之路(九)
之前的文章我们介绍了 React propTypes defaultProps.接下来我们将介绍 React 生命周期函数. 之前我们已经根据 create-react-app 模块创建了一个 Re ...
- React 从入门到进阶之路(四)
之前的文章我们介绍了 React 绑定属性( 绑定class 绑定style).引入图片 循环数组渲染数据.接下来我们将介绍 React 事件,方法, React定义方法的几种方式 获取数据 改 ...
- React 从入门到进阶之路(三)
之前的文章我们介绍了 React 创建组件.JSX 语法.绑定数据和绑定对象.接下来我们将介绍 React 绑定属性( 绑定class 绑定style).引入图片 循环数组渲染数据. 上一篇中我们 ...
- React 从入门到进阶之路(七)
之前的文章我们介绍了 React 表单详解 约束性和非约束性组件 input text checkbox radio select textarea 以及获取表单的内容.接下来我们将介绍 Rea ...
- React 从入门到进阶之路(六)
之前的文章我们介绍了 React 表单事件 键盘事件 事件对象以及 React中 的 ref 获取 dom 节点 .双向数据绑定.接下来我们将介绍 React 表单详解 约束性和非约束性组件 inpu ...
- React 从入门到进阶之路(八)
之前的文章我们介绍了 React中的组件.父子组件.React props父组件给子组件传值.子组件给父组件传值.父组件中通过refs获取子组件属性和方法.接下来我们将介绍 React propTyp ...
- React 从入门到进阶之路(二)
在之前的文章中我们介绍了 React 开发的环境搭建及目录介绍和整理,本篇文章将介绍 React 创建组件.JSX 语法.绑定数据和绑定对象. 之前我们已经将项目运行了起来,我们再来看一下目录结构: ...
- React 从入门到进阶之路(一)
在开始 React 学习之前我们先进入官网 https://react.docschina.org/ 看看官方对 React 的解释:React 是用于构建用户界面的JavaScript 库.我们只需 ...
- koa2 从入门到进阶之路 (五)
之前的文章我们介绍了一下 koa 中使用 ejs 模板及页面渲染,本篇文章我们来看一下 koa post提交数据及 koa-bodyparser中间件. 在前端页面中,不免会用到 form 表单和 p ...
随机推荐
- The connection between feature spaces and smoothness is not obvious, and is one of the things we’ll discuss in the course.
http://www.gatsby.ucl.ac.uk/~gretton/coursefiles/lecture4_introToRKHS.pdf
- 【题解】CF264B Good Sequences
[题解]CF264B Good Sequences 具有很明显的无后效性. 考虑\(dp\). 考虑初始条件,显然是\(dp(0)=0\) 考虑转移,显然是\(dp(t)=max(dp[k])+1\) ...
- 如何使用RadioGroup和RadioButton实现FragmentTabHost导航效果?
目录: 一.概述 最近在做一个新闻类结合社区的APP的时候,需要添加一个侧滑菜单的效果,考虑到可以使用DrawerLayout布局,但是问题是使用了 DrawerLayout布局后,主页内容应该是一个 ...
- 流畅的python学习笔记:第十三章:重载运算符__add__,__iadd__,__radd__,__mul__,__rmul__,__neg__,__eq__,__invert__,__pos__
在前面第十章以及第一章的时候介绍了Vector对象的运算符重载.第十三章专门介绍运算符重载.这里我们看几个之前没讲过的运算符__neg__,__pos__,__invert__ class Vecto ...
- .htaccess技巧: URL重写(Rewrite)与重定向(Redirect) (转)
目录 Table of Contents 一.准备开始:mod_rewrite 二.利用.htaccess实现URL重写(rewrite)与URL重定向(redirect) 将.htm页面映射到.ph ...
- (扫盲)jQuery extend()和jQuery.fn.extend()的区别
1.认识jQuery extend()和jQuery.fn.extend() jQuery的API手册中,extend方法挂载在jQuery和jQuery.fn两个不同对象上方法,但在jQuery内部 ...
- Android/iOS Remote debugging
简单介绍 使用下面方法可以定位webview中的元素,无法定位view中的元素. 原文地址:http://mp.weixin.qq.com/s/y_UfdgjT_pkKgYivJmqt7Q webvi ...
- LeetCode:二叉树剪枝【814】
LeetCode:二叉树剪枝[814] 题目描述 给定二叉树根结点 root ,此外树的每个结点的值要么是 0,要么是 1. 返回移除了所有不包含 1 的子树的原二叉树. ( 节点 X 的子树为 X ...
- 5.1 《锋利的jQuery》jQuery对表单的操作
获取焦点和失去焦点改变样式 改变文本框/滚动条高度 复选框应用 下拉框应用 表单验证 tip1: 注意使用<label>的for标签,对应input的id.(for 属性规定 label ...
- HTML/CSS实现的搜索框
谷歌和百度首页的搜索框都是<input>+<button>模式的,bing的搜索框感觉要好点儿.简言之,就是将提交按钮放到<input>中,其实这是做不到的,只能伪 ...