表单组件

诸如 <input>、<textarea>、<option> 这样的表单组件不同于其他组件，因为他们可以通过用户交互发生变化。这些组件提供的界面使响应用户交互的表单数据处理更加容易。

交互属性

表单组件支持几个受用户交互影响的属性：

value，用于 <input>、<textarea> 组件。
checked，用于类型为 checkbox 或者 radio 的 <input> 组件。
selected，用于 <option> 组件。
在 HTML 中，<textarea> 的值通过子节点设置；在 React 中则应该使用 value 代替。

表单组件可以通过 onChange 回调函数来监听组件变化。当用户做出以下交互时，onChange 执行并通过浏览器做出响应：

<input> 或 <textarea> 的 value 发生变化时。
<input> 的 checked 状态改变时。
<option> 的 selected 状态改变时。
和所有 DOM 事件一样，所有的 HTML 原生组件都支持 onChange 属性，而且可以用来监听冒泡的 change 事件。

受限组件

设置了 value 的 <input>是一个受限组件。对于受限的 <input>，渲染出来的 HTML 元素始终保持 value 属性的值。例如：

  render: function() {return <input type="text" value="Hello!" />;}

上面的代码将渲染出一个值为 Hello! 的 input 元素。用户在渲染出来的元素里输入任何值都不起作用，因为 React 已经赋值为 Hello!。如果想响应更新用户输入的值，就得使用 onChange 事件：

  getInitialState: function() {return {value: 'Hello!'};},handleChange: function(event) {this.setState({value: event.target.value});},render: function() {var value = this.state.value;return <input type="text" value={value} onChange={this.handleChange} />;}

上面的代码中，React 将用户输入的值更新到组件的 value 属性。这样实现响应或者验证用户输入的界面就很容易了。例如：

  handleChange: function(event) {this.setState({value: event.target.value.substr(0, 140)});}

上面的代码接受用户输入，并截取前 140 个字符。

不受限组件

没有设置 value(或者设为 null) 的组件是一个不受限组件。对于不受限的组件，渲染出来的元素直接反应用户输入。例如：

  render: function() {return <input type="text" />;}

上面的代码将渲染出一个空值的输入框，用户输入将立即反应到元素上。和受限元素一样，使用 onChange 事件可以监听值的变化。

如果想给组件设置一个非空的初始值，可以使用 defaultValue 属性。例如：

  render: function() {return <input type="text" defaultValue="Hello!" />;}

上面的代码渲染出来的元素和受限组件一样有一个初始值，但这个值用户可以改变并会反应到界面上。

同样地，类型为 radio、checkbox 的支持 defaultChecked 属性，支持 defaultValue 属性。

 render: function() {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>);}

高级主题

为什么使用受限组件？

在 React 中使用诸如 <input> 的表单组件时，遇到了一个在传统 HTML 中没有的挑战。

比如下面的代码：

<input type="text" name="title" value="Untitled" />

在 HTML 中将渲染初始值为 Untitled 的输入框。用户改变输入框的值时，节点的 value 属性（property）将随之变化，但是 node.getAttribute(‘value’) 还是会返回初始设置的值 Untitled.

与 HTML 不同，React 组件必须在任何时间点描绘视图的状态，而不仅仅是在初始化时。比如在 React 中：

 render: function() {return <input type="text" name="title" value="Untitled" />;}

该方法在任何时间点渲染组件以后，输入框的值就应该始终为 Untitled。

为什么 `<textarea>` 使用 value 属性？

在 HTML 中， <textarea> 的值通常使用子节点设置：

<!-- 反例：在 React 中不要这样使用！ -->
<textarea name="description">This is the description.</textarea>

对 HTML 而言，让开发者设置多行的值很容易。但是，React 是 JavaScript，没有字符限制，可以使用 \n 实现换行。简言之，React 已经有 value、defaultValue 属性，组件的子节点扮演什么角色就有点模棱两可了。基于此，设置值时不应该使用子节点：

  <textarea name="description" value="This is a description." />

如果非要*使用子节点，效果和使用 defaultValue 一样。

为什么使用 value 属性

HTML 中通常使用的 selected 属性设置选中状态；React 为了更方面的控制组件，采用以下方式代替：

  <select value="B"><option value="A">Apple</option><option value="B">Banana</option><option value="C">Cranberry</option></select>

如果是不受限组件，则使用 defaultValue。

注意：
给 value 属性传递一个数组，可以选中多个选项：<select multiple={true} value={['B', 'C']}>

文章来源：

[React网络整理]React之表单组件的学习笔记相关推荐

flutter - 图文讲解表单组件基本使用注册实战
图文讲解表单组件,创建表单组件.校验表单.复杂表单.复杂校验规则.动态控制表单实现一个注册界面创建表单组件创建form组件 Form组件函数(准确说叫widget),然后写一个key,因为我们等 ...
微信小程序 - 基础 - 003 - WEUI - 基本表单组件 - form - 页面数据提交和获取 - 01
前言:form作为数据提交的重要控件,历来在前端设计中非常重要.微信给出了完整的form的例子.参考了一些微信设计的书籍,大多数都是copy 粘贴了例子的东西.... 其实微信的例子给的比较充分了: ...
移动端通用元件库+app通用元件库+数据展示+操作反馈+通用模板+数据录入+列表页+表单页+详情页+通用版布局+移动端手机模板+业务组件+反馈组件+展示组件+表单组件+导航组件
移动端通用元件库+app通用元件库+数据展示+操作反馈+通用模板+数据录入+列表页+表单页+详情页+通用版布局+移动端手机模板+业务组件+反馈组件+展示组件+表单组件+导航组件原型展示及下载地址:h ...
jsf tree组件_JSF表单组件示例教程
jsf tree组件 JSF Form component is a collection of fields along with the data and submit functionality ...
表单引擎之表单组件详细说明
简介表单组件是表单引擎的核心,下面将对常用表单组件进行详细的说明. 文档约定字符"●"标识"是". 字符"○"表示"否&quo ...
微信小程序学习之路——表单组件（一）
radio组件 1.radio-group 在小程序中<radio/>不能单独使用,同一组<radio/>需要包含在一个<radio group/>中,这样才能形成 ...
微信小程序开发之（表单组件的使用）代码篇
表单组件 1.工程目录 2.详细代码 3.结果展示 4.获取资源这篇文章介绍微信小程序的表单组件的使用内容包括添加视频播放.轮转图片.多选框单选框.实时获取输入值.按钮提交输入控件的数据笔者直 ...
Vue form-create的基本使用和自定义表单组件的数据通迅
前言由于之前有个Web项目,大部分都是表单,而且这些表单是通过请求后端接口返回的数据,动态生成对应的DOM(表单类型),以及表单的初始数据渲染,和修改表单后的数据提交. 根据以上项目情况,所以这次就 ...
美赛整理之Matlab的工程数学计算学习笔记（高等数学）
美赛整理之Matlab的工程数学计算学习笔记(高等数学) 1.极限的定义和判别: 2.绘制特殊曲面 3.求两个空间曲面的交线 4.定积分的计算 5.多重积分的计算 1.截面法: 2.定义法 (1)先画 ...

[React网络整理]React之表单组件的学习笔记

表单组件

交互属性

受限组件

不受限组件

高级主题

为什么使用受限组件？

为什么 `<textarea>` 使用 value 属性？

为什么使用 value 属性

[React网络整理]React之表单组件的学习笔记相关推荐

最新文章

热门文章

[React网络整理]React之表单组件的学习笔记

表单组件

交互属性

受限组件

不受限组件

高级主题

为什么使用受限组件？

为什么 <textarea> 使用 value 属性？

为什么 使用 value 属性

[React网络整理]React之表单组件的学习笔记相关推荐

最新文章

热门文章

为什么 `<textarea>` 使用 value 属性？

为什么使用 value 属性