react之可控组件与不可控组件
一、不可控组件
<input type="text" defaultvalue="Hello React" />
如上:defaultvalue的值是固定的,这就是一个不可控组件
如果要获取input的value值,只有使用ref获取节点来获取值
二、可控组件
<input type="text" defaultvalue={this.state.value} />
如上:defaultvalue的值是根据状态确定的,只需要拿到this.state.value的值就可以了,
这里需要注意一下:使用value的值是不可以修改的,defaultValue的值是可以修改的
三、可控组件的优点
1、符合React的数据流
2、数据存储在state中,便于获取
3、便于处理数据
import React from 'react';
import ReactDOM from 'react-dom'; // 不可控组建,要是使用refs属性对DOM节点进行操作
class UnControll extends React.Component {
submitData = (e)=> {
var userInput1 = ReactDOM.findDOMNode(this.refs.userInput1).value;
var userInput2 = ReactDOM.findDOMNode(this.refs.userInput2).value;
alert(userInput1);
alert(userInput2)
e.preventDefault();
}
render(){
return (
<form onSubmit={this.submitData}>
{/*
在表单中,使用value是无法改变的,需要使用defaultValue
checked与defaultChecked同上
*/}
<input
type="text"
value="不可控组件"
ref="userInput1"
/>
<input
type="text"
defaultValue="不可控组件"
ref="userInput2"
/>
<button>提交</button>
</form>
)
}
} // 可控组建,不需要对DOM进行操作
class Controll extends React.Component {
state = { value:'可控组件' }
submitData = (e)=> {
alert(this.state.value);
e.preventDefault();
}
handleChange = (e)=>{
this.setState({
value:e.target.value
})
}
render() {
return (
<form onSubmit={this.submitData}>
<input
type="text"
defaultValue={this.state.value}
onChange={this.handleChange}
/>
<button>提交</button>
</form>
);
}
} export default Controll;
react之可控组件与不可控组件的更多相关文章
- React受控组件和非受控组件
受控组件和非受控组件主要是用来解决表单组件状态谁来控制的问题.因为用户的输入会反应在界面上,相当于视图的状态发生了变化,而react是通过虚拟DOM比对修改视图的,这里就要决定谁来控制表单组件的状态. ...
- React Native填坑之旅--Stateless组件
Stateless component也叫无状态组件.有三种方法可以创建无状态组件. 坑 一般一个组件是怎么定义的: 很久以前的方法: const Heading = createClass({ re ...
- 基于React Native的Material Design风格的组件库 MRN
基于React Native的Material Design风格的组件库.(为了平台统一体验,目前只打算支持安卓) 官方网站 http://mrn.js.org/ Github https://git ...
- 【react】利用prop-types第三方库对组件的props中的变量进行类型检测
1.引言--JavaScript就是一个熊孩子 1.1对于JSer们来说,js是自由的,但同时又有许多让人烦恼的地方.javascript很多时候就是这么一个熊孩子,他很多时候并不会像C和java ...
- 5. React 组件的协同使用 组件嵌套和Mixin
组件是React的核心,构建大型项目时多个组件之间需要进行协同使用.可以从横向和纵向两个角度来实现组件的协同使用,纵向的协同使用就是组件嵌套,横向的协同使用就是Mixin(抽取公共方法 ...
- React:受控组件与非受控组件混用实战 - 译文
原文链接:React: hybrid controlled components in action 受控组件 非受控组件 混用受控组件和非受控组件 原则一 原则二 原则三 原则四 实施方案 总结 F ...
- react初探(二)之父子组件通信、封装公共组件
一.前言 在组件方面react和Vue一样的,核心思想玩的就是组件,下面举两个组件常用的情景. 场景一:假如我们现在有一个页面包含表格以及多个弹框,这种时候如果将这个页面的业务代码写在一个组件中,那么 ...
- 三大前端框架(react、vue、angular2+)父子组件通信总结
公司业务需要,react.vue.angular都有接触[\无奈脸].虽然说可以拓展知识广度,但是在深度上很让人头疼.最近没事的时候回忆各框架父子组件通信,发现很模糊,于是乎稍微做了一下功课,记录于此 ...
- React中嵌套组件与被嵌套组件的通信
前言 在React项目的开发中经常会遇到这样一个场景:嵌套组件与被嵌套组件的通信. 比如Tab组件啊,或者下拉框组件. 场景 这里应用一个最简单的Tab组件来呈现这个场景. import React, ...
随机推荐
- 笨办法学Python记录--习题1-11
20140412(习题1-10),和打印较劲: 1. 读这本书时没有按照要求安装Python2,我选择的是最新版3.4.0(官方release),然后悲剧发现完全不兼容,现在摘录2,3区别: 这个星期 ...
- cordova 与 phonegap关系
Apache Cordova是PhoneGap贡献给Apache后的开源项目,是从PhoneGap中抽出的核心代码,是驱动PhoneGap的核心引擎.PhoneGap是一个开源的开发框架,使用HTML ...
- org.mybatis总是认不出来的原因,pom.xml中有
idea打开maven project,然后就华丽丽的看见下载失败,怎么刷新都没有用. 请按以下步骤完成即可: https://blog.csdn.net/ZhengYanFeng1989/artic ...
- 2019 牛客多校第三场 B Crazy Binary String
题目链接:https://ac.nowcoder.com/acm/contest/883/B 题目大意 给定一个长度为 N 的 01 字符串,输出最长子串和子序列的长度,满足其中 0 和 1 的个 ...
- L1正则化可以解决过拟合问题(稀疏解)
损失函数最小,也就是求极值点,也就是损失函数导数为0.上面也说了,如果d0+λ和d0-λ为异号的时候刚好为极值点,损失函数导数为0(w为0是条件).而对于L2正则化,在w=0时并不一定是极值点而是d0 ...
- 用solr DIH 实现mysql 数据定时,增量同步到solr
基础环境: (二)设置增量导入为定时执行的任务: 很多人利用Windows计划任务,或者Linux的Cron来定期访问增量导入的连接来完成定时增量导入的功能,这其实也是可以的,而且应该没什么问题. 但 ...
- HDU 2586 /// tarjan离线求树上两点的LCA
题目大意: 询问一棵树里 u 到 v 的距离 可由 dis[ u到根 ] + dis[ v到根 ] - 2*dis[ lca(u,v) ] 得到 https://blog.csdn.net/csyzc ...
- pip修改官方源为豆瓣源
参考地址: https://www.jianshu.com/p/10a23d6a93c6 1.临时修改 pip install pythonModuleName -i https://pypi.dou ...
- RocketMQ核心技术精讲与高并发抗压实战
1:特点 比较吃内存 内存至少1g 默认8g 1:支持集群模型,强调集群无单点,负载均衡以及水平扩展能力2:亿级别的消息堆积能力3:采用零拷贝原理Consumer 消费消息过程,使用了零拷贝 顺序写盘 ...
- str和byte的区别
bytes 1.bytes对象只负责以二进制字节序列的形式记录所需记录的对象,至于该对象到底表示什么(比如到底是什么字符)则由相应的编码格式解码所决定 2.bytes是Python 3中特有的,Pyt ...