受控组件 & 非受控组件
在 React 中表单组件可分为两类,受控与非受控组件.
一、 受控组件
设置了 value
的 <input>
是一个受控组件。 对于受控的 <input>
,渲染出来的 HTML 元素始终保持 value
属性的值。例如:
render() {
return <input type="text" value="Hello"/>
}
上面的代码将渲染出一个值为 Hello!
的 input 元素。用户在渲染出来的元素里输入任何值都不起作用,因为 React 已经赋值为 Hello!
。如果想响应更新用户输入的值,就得使用 onChange
事件:
constructor(props) {
super(props);
this.state={value:'Hello'};
this.handleChange=this.handleChange.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
render() {
var value = this.state.value;
return <input type="text" value={value} onChange={this.handleChange} />;
}
上面的代码中,React 将用户输入的值更新到 <input>
组件的 value
属性。这样实现响应或者验证用户输入的界面就很容易了。
注意:如果将value指定为undefined,则其变为了非受控组件,可以允许用户随意输入。
二、 非受控组件
没有设置 value
(或者设为 null
) 的 <input>
组件是一个非受控组件。对于非受控的 <input>
组件,渲染出来的元素直接反映用户输入。例如:
render() {
return <input type="text"/>
}
上面的代码将渲染出一个空值的输入框,用户输入将立即反应到元素上。和受控元素一样,使用 onChange
事件可以监听值的变化。
如果想给组件设置一个非空的初始值,可以使用 defaultValue
属性。例如:
render() {
return <input type="text" defaultValue="Default Value">
}
上面的代码渲染出来的元素和受控组件一样有一个初始值,但这个值用户可以改变并会反应到界面上。同样地, 类型为 radio
、checkbox
的<input>
支持 defaultChecked
属性, <select>
支持 defaultValue
属性。
render() {
return (
<div>
<input type="radio" name="opt" defaultChecked /> Option 1
<input type="radio" name="opt" /> Option 2
<select defaultValue="C">
<option value="A">Apple</option>
<option value="B">Banana</option>
<option value="C">Cranberry</option>
</select>
</div>
);
}
需要注意的是,默认值只适用于第一次渲染,在重渲染阶段将不会适用。
三、checkbox和radio
checkbox 和 radio 比较特殊, 如果在 onChange 事件中调用了 preventDefault ,那么浏览器不会更新 checked 状态,即便事实上组件的值已经 checked 或者 unchecked 了 。
class HelloWorld extends React.Component{
constructor(props){
super(props);
this.handleChange=this.handleChange.bind(this);
this.state={checked:true};
}
handleChange(e){
e.preventDefault();
this.setState((prevState) => {
return {checked:!prevState.checked};
});
}
render(){
return (<div>
<input type="checkbox" checked={this.state.checked} onChange={this.handleChange} />点击我
<br/>{String(this.state.checked)}
</div>)
}
} ReactDOM.render(<HelloWorld/>,document.body);
![]() |
![]() |
在上面的例子中,虽然this.state.checked的值已经改变,但是checkbox的值确没有变,解决这个问题有三种方法:
1) 避免调用e.preventDefault,比如将上例的e.preventDefault注释掉就可以了;
2) 在setTimeout中处理checked的修改
handleChange(e){
window.setTimeout(() => {
this.setState((prevState) => {
return {checked:!prevState.checked};
});
},0);
}
3) 使用click事件
受控组件 & 非受控组件的更多相关文章
- Vue 中的受控与非受控组件
Vue 中的受控与非受控组件 熟悉 React 的开发者应该对"受控组件"的概念并不陌生,实际上对于任何组件化开发框架而言,都可以实现所谓的受控与非受控,Vue 当然也不例外.并且 ...
- 七天接手react项目 —— 生命周期&受控和非受控组件&Dom 元素&Diffing 算法
生命周期&受控和非受控组件&Dom 元素&Diffing 算法 生命周期 首先回忆一下 vue 中的生命周期: vue 对外提供了生命周期的钩子函数,允许我们在 vue 的各个 ...
- 浅谈React受控与非受控组件
背景 React内部分别使用了props, state来区分组件的属性和状态.props用来定义组件外部传进来的属性, 属于那种经过外部定义之后, 组件内部就无法改变.而state维持组件内部的状态更 ...
- React学习之受控和非受控组件
受控组件是通过事件完成对元素value的控制,反之就是非受控组件. 1.受控组件的value通过onChange事件来改变,非受控不需要通过事件来改变value. 2.受控组件通过事件通过setSta ...
- react 表单受控和非受控
参见:https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/ 非受控: onSubmit = ()=>{ const val ...
- 【vue】父组件主动调用子组件 /// 非父子组件传值
一 父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="he ...
- Vue兄弟组件(非父子组件)状态共享与传值
前言:网上大部分文章写的有点乱,很少有讲得易懂的文章. 所以,我写了篇在我能看得懂的基础上又照顾到大家的文章 =.= 作者:X1aoYE 备注:此文原创,转载请注明~ 内容里的<br> ...
- Vue 组件 非父子组件通信
有时候两个组件也需要通信(非父子关系),在简单的场景下,可以使用一个空的vue实例作为中央事件总线: var bus = new Vue(); //触发组件a中的事件 bus.$emit('id-se ...
- React:受控组件与非受控组件混用实战 - 译文
原文链接:React: hybrid controlled components in action 受控组件 非受控组件 混用受控组件和非受控组件 原则一 原则二 原则三 原则四 实施方案 总结 F ...
随机推荐
- 核K-均值聚类(Kernel K-means Clustering)
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/wxcdzhangping/article/details/31366143 问题: 设 ...
- 五.反馈(Hopfield)神经网络
前馈网络一般指前馈神经网络或前馈型神经网络.它是一种最简单的神经网络,各神经元分层排列.每个神经元只与前一层的神经元相连.接收前一层的输出,并输出给下一层,数据正想流动,输出仅由当前的输入和网络权值决 ...
- HDU 3555 (递推&&记忆化)
#include<stdio.h> #include<string.h> #define max 25 typedef __int64 LL; LL dp[max][]; // ...
- NOIP模拟 17.8.15
NOIP模拟17.8.15 A 债务文件名 输入文件 输出文件 时间限制 空间限制debt.pas/c/cpp debt.in debt.out 1s 128MB[题目描述]小 G 有一群好朋友,他们 ...
- Kubernetes 调度器实现初探
Kubernetes 调度器 Kubernetes 是一个基于容器的分布式调度器,实现了自己的调度模块.在Kubernetes集群中,调度器作为一个独立模块通过pod运行.从几个方面介绍Kuberne ...
- if (donutString.indexOf("dozen") != -1)是什么意思
if (donutString.indexOf("dozen") != -1)是什么意思 function parseDonuts(donutString) { numDonuts ...
- 链表源代码(C语言实现)
源代码(C语言实现) ①.构造链表节点 typedef struct Node //一个单独的节点 { int ...
- LintCode_420 报数
题目 报数指的是,按照其中的整数的顺序进行报数,然后得到下一个数.如下所示: 1, 11, 21, 1211, 111221, ... 1 读作 "one 1" -> 11. ...
- 【JZOJ4814】【NOIP2016提高A组五校联考2】tree
题目描述 给一棵n 个结点的有根树,结点由1 到n 标号,根结点的标号为1.每个结点上有一个物品,第i 个结点上的物品价值为vi. 你需要从所有结点中选出若干个结点,使得对于任意一个被选中的结点,其到 ...
- Directx教程(29) 简单的光照模型(8)
原文:Directx教程(29) 简单的光照模型(8) 现在我们新建一个工程myTutorialD3D_23,在这个工程中,对前面一章的代码进行一些整理: 1.我们在顶点属性中增加材质的的漫 ...