浅谈React表单组件
来源:互联网 发布:c语言单引号字符 编辑:程序博客网 时间:2024/05/29 07:04
表单组件不同于其他原生组件,可以通过用户交互发生变化,使响应用户交互的表单数据处理更加容易。
1、交互属性
表单组件支持几个受用户交互影响的属性:
1) value:用于 <input>、<textarea> 组件。
2) checked:用于type为 checkbox 或 radio 的 <input> 组件。
3) selected:用于 <option> 组件。
在 HTML 中,<textarea> 的值通过子节点设置;在 React 中<textarea> 的值通过 value设置。
表单组件可以通过 onChange 回调函数来监听组件变化。当用户做出以下交互时,onChange 执行并通过浏览器做出响应:
1) <input> 或 <textarea> 的 value 改变时。
2) <input> 的 checked 改变时。
3) <option> 的 selected 改变时。
注意:
对于 <input> and <textarea>, onChange 应该替代DOM内建的 oninput 。
2、受控组件
一个有 value 属性的 <input> 是一个受控组件。
问题:用户输入在被渲染的元素里将没有作用,即输入框的值无法改变。
var MyBox = React.createClass({render: function() {return (<input type="text" value="React"/>);}})ReactDOM.render(<MyBox />,document.getElementById("timeBox"));
解决:和state结合在一起,再绑定onChange事件,实时更新 value 值来响应用户输入:
var MyBox = React.createClass({getInitialState: function() {return {value: 'Hello react'};},change: function(event) {this.setState({value: event.target.value});},render: function() {return (<input type="text" value={this.state.value} onChange={this.change}/>);}})ReactDOM.render(<MyBox />,document.getElementById("timeBox"));
3、不受控组件
一个没有 value 属性的 <input> 是一个不受控组件。
不受控组件维持自己的内部状态。
渲染出一个空值的输入框,用户输入将立即反应到元素上。
var MyBox = React.createClass({render: function() {return (<input type="text"/>);}})ReactDOM.render(<MyBox />,document.getElementById("timeBox"));
和受控元素一样,使用 onChange 事件可以监听值的变化。
var MyBox = React.createClass({getInitialState: function() {return {value: 'Hello react'};},change: function(event) {this.setState({value: event.target.value});},render: function() {return (<input type="text" onChange={this.change}/>);}})ReactDOM.render(<MyBox />,document.getElementById("timeBox"));
可以通过defaultValue给组件设置一个初始默认值,defaultValue属性是React内部实现的一个属性,类似于input的placeholder属性。
var MyBox = React.createClass({render: function() {return (<input type="text" defaultValue="Hello react"/>);}})ReactDOM.render(<MyBox />,document.getElementById("timeBox"));
4、为什么要使用受控组件?
在 React 中使用 <input> 等表单组件时,会遇到了一个在 HTML 中没有的问题:它渲染一个具有特定初始值的输入框,当用户改变输入框的值时,节点的 value 属性将随之变化,但是 node.getAttribute('value') 还是会返回初始值。
与 HTML 不同,React 组件必须在任何时间点表现视图的状态,而不仅仅是在初始化时,因此需要使用受控组件。
5、<textarea>的value 属性
在 HTML 中, <textarea> 的值通常使用子节点设置:
<textarea>Hello react</textarea>
但是,由于 React 是 JavaScript,没有字符串限制,可以使用 \n 实现换行。简言之,React 已经有 value、defaultValue 属性,<textarea> 组件的子节点扮演什么角色会模棱两可,因此,设置 <textarea> 值时不应该使用子节点:
<textarea value="Hello react" />
6、<select> 的value 属性
HTML 中 <select> 通常使用 <option> 的 selected 属性设置选中状态;React 为了更方便地控制组件,采用以下方式代替:
<select value="Second"> <option value="First">First</option> <option value="Second">Second</option> <option value="Third">Third</option></select>
如果是不受控组件,则使用 defaultValue。
给 value 属性传递一个数组,可以选中多个选项:<select multiple={true} value={['Second', 'Third']}>。
- 浅谈React表单组件
- React的表单组件
- react实现表单组件
- React中的表单组件
- 浅谈React组件的生命周期
- [React网络整理]React之表单组件的学习笔记
- 浅谈react受控组件与非受控组件
- 翻译 | 玩转 React 表单 —— 受控组件详解
- React表单
- React -- 表单
- react-表单
- React表单
- react表单
- 浅谈React
- 【React全家桶入门之五】组件化表单/表单控件
- React 组件
- React组件
- react 组件
- idea 中error:failed to create a child event loop问题解决
- Http请求中Content-Type讲解
- SDUT 2880 Devour Magic(线段树lazy和set标记模板)
- 为什么requestWindowFeature()方法要在setContentView()方法之前调用?
- iOS事件响应链中Hit-Test View的应用
- 浅谈React表单组件
- A3.1节
- J2EE系列之Hibernate4学习笔记(五)--关联关系一对多映射
- java中统一方法进行切面管理
- 事件分发机制
- MSSQL 数据库被标记为SUSPECT状态,如何恢复?
- 一个简单的Http客户端Demo
- 数组正负值排序
- android 将图片变为圆角