在 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">
}

上面的代码渲染出来的元素和受控组件一样有一个初始值,但这个值用户可以改变并会反应到界面上。同样地, 类型为 radiocheckbox 的<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事件

受控组件 & 非受控组件的更多相关文章

  1. Vue 中的受控与非受控组件

    Vue 中的受控与非受控组件 熟悉 React 的开发者应该对"受控组件"的概念并不陌生,实际上对于任何组件化开发框架而言,都可以实现所谓的受控与非受控,Vue 当然也不例外.并且 ...

  2. 七天接手react项目 —— 生命周期&受控和非受控组件&Dom 元素&Diffing 算法

    生命周期&受控和非受控组件&Dom 元素&Diffing 算法 生命周期 首先回忆一下 vue 中的生命周期: vue 对外提供了生命周期的钩子函数,允许我们在 vue 的各个 ...

  3. 浅谈React受控与非受控组件

    背景 React内部分别使用了props, state来区分组件的属性和状态.props用来定义组件外部传进来的属性, 属于那种经过外部定义之后, 组件内部就无法改变.而state维持组件内部的状态更 ...

  4. React学习之受控和非受控组件

    受控组件是通过事件完成对元素value的控制,反之就是非受控组件. 1.受控组件的value通过onChange事件来改变,非受控不需要通过事件来改变value. 2.受控组件通过事件通过setSta ...

  5. react 表单受控和非受控

    参见:https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/ 非受控: onSubmit = ()=>{ const val ...

  6. 【vue】父组件主动调用子组件 /// 非父子组件传值

    一  父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="he ...

  7. Vue兄弟组件(非父子组件)状态共享与传值

      前言:网上大部分文章写的有点乱,很少有讲得易懂的文章. 所以,我写了篇在我能看得懂的基础上又照顾到大家的文章 =.= 作者:X1aoYE 备注:此文原创,转载请注明~  内容里的<br> ...

  8. Vue 组件 非父子组件通信

    有时候两个组件也需要通信(非父子关系),在简单的场景下,可以使用一个空的vue实例作为中央事件总线: var bus = new Vue(); //触发组件a中的事件 bus.$emit('id-se ...

  9. React:受控组件与非受控组件混用实战 - 译文

    原文链接:React: hybrid controlled components in action 受控组件 非受控组件 混用受控组件和非受控组件 原则一 原则二 原则三 原则四 实施方案 总结 F ...

随机推荐

  1. 核K-均值聚类(Kernel K-means Clustering)

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/wxcdzhangping/article/details/31366143 问题:        设 ...

  2. 五.反馈(Hopfield)神经网络

    前馈网络一般指前馈神经网络或前馈型神经网络.它是一种最简单的神经网络,各神经元分层排列.每个神经元只与前一层的神经元相连.接收前一层的输出,并输出给下一层,数据正想流动,输出仅由当前的输入和网络权值决 ...

  3. HDU 3555 (递推&&记忆化)

    #include<stdio.h> #include<string.h> #define max 25 typedef __int64 LL; LL dp[max][]; // ...

  4. NOIP模拟 17.8.15

    NOIP模拟17.8.15 A 债务文件名 输入文件 输出文件 时间限制 空间限制debt.pas/c/cpp debt.in debt.out 1s 128MB[题目描述]小 G 有一群好朋友,他们 ...

  5. Kubernetes 调度器实现初探

    Kubernetes 调度器 Kubernetes 是一个基于容器的分布式调度器,实现了自己的调度模块.在Kubernetes集群中,调度器作为一个独立模块通过pod运行.从几个方面介绍Kuberne ...

  6. if (donutString.indexOf("dozen") != -1)是什么意思

    if (donutString.indexOf("dozen") != -1)是什么意思 function parseDonuts(donutString) { numDonuts ...

  7. 链表源代码(C语言实现)

    源代码(C语言实现) ①.构造链表节点 typedef struct Node    //一个单独的节点                   {                         int ...

  8. LintCode_420 报数

    题目 报数指的是,按照其中的整数的顺序进行报数,然后得到下一个数.如下所示: 1, 11, 21, 1211, 111221, ... 1 读作 "one 1" -> 11. ...

  9. 【JZOJ4814】【NOIP2016提高A组五校联考2】tree

    题目描述 给一棵n 个结点的有根树,结点由1 到n 标号,根结点的标号为1.每个结点上有一个物品,第i 个结点上的物品价值为vi. 你需要从所有结点中选出若干个结点,使得对于任意一个被选中的结点,其到 ...

  10. Directx教程(29) 简单的光照模型(8)

    原文:Directx教程(29) 简单的光照模型(8)      现在我们新建一个工程myTutorialD3D_23,在这个工程中,对前面一章的代码进行一些整理: 1.我们在顶点属性中增加材质的的漫 ...