在 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. mysql8下载安装及配置

    mysql8下载和安装 一.下载 官网地址:https://dev.mysql.com/downloads/mysql/8.0.html 选择“downloads”-->"mysql ...

  2. Python实例 类和继承

    class Base:     def __init__(self):         self.data = []     def add(self, x):         self.data.a ...

  3. Uva116 Unidirectional TSP

    https://odzkskevi.qnssl.com/292ca2c84ab5bd27a2a91d66827dd320?v=1508162936 https://vjudge.net/problem ...

  4. 悠星网络基于阿里云分析型数据库PostgreSQL版的数据实践

    说到“大数据”,当下这个词很火,各行各业涉及到数据的,目前都在提大数据,提数据仓库,数据挖掘或者机器学习,但同时另外一个热门的名词也很火,那就是“云”.越来越多的企业都在搭建属于自己的云平台,也有一些 ...

  5. Spring使用JDBC配置具名参数

    好处:若有多个参数,则不用再去对应位置?,直接对应参数名,便于维护 缺点:较为麻烦 使用具名参数时可以使用以下的方法 好处,通过实现类BeanPropertySqlParameterSource之间传 ...

  6. Direct2D 第2篇 绘制椭圆

    原文:Direct2D 第2篇 绘制椭圆 #include <windows.h> #include <d2d1.h> #include <d2d1helper.h> ...

  7. PHP原生DOM对象操作XML的方法解答

    创建一个新的XML文件,并且写入一些数据到这个XML文件中. /** 创建xml文件*/ $info = array(array('obj' => 'power','info' => 'p ...

  8. vue-cli3 关闭eslint

    关闭eslint 直接注释掉package.json文件中eslint的配置就可以了(以下是vue-cli的默认配置) "eslintConfig": { "root&q ...

  9. ChaosBlade 发布对 C++ 应用混沌实验的支持

    前言 为满足 C++ 应用系统故障演练,阿里妈妈安全生产团队开源了 C++ 混沌实验执行器,填补了 C++ 应用混沌工程实验的空白,其遵循<混沌实验模型>,可通过 ChaosBlade 工 ...

  10. Thrift源码分析(一)-- 基本概念

    我所在的公司使用Thrift作为基础通信组件,相当一部分的RPC服务基于Thrift框架.公司的日UV在千万级别,Thrift很好地支持了高并发访问,并且Thrift相对简单地编程模型也提高了服务地开 ...