浅谈React表单组件
2017-05-04 14:54
477 查看
表单组件不同于其他原生组件,可以通过用户交互发生变化,使响应用户交互的表单数据处理更加容易。
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']}>。
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中的表单组件
- ReactJS学习笔记——组件复合及表单的处理
- 浅谈 Vue v-model指令的实现原理 - 如何利用v-model设计自定义的表单组件
- 翻译 | 玩转 React 表单 —— 受控组件详解
- reactjs入门到实战(八)----表单组件的使用
- React表单组件自定义-可控及不可控组件
- 浅谈React深度编程之受控组件与非受控组件
- 浅谈React中组件间抽象
- React 复用组件 含表单radio/checkbox注意的问题
- 浅谈React中的元素、组件、实例和节点
- [React网络整理]React之表单组件的学习笔记
- react实现表单组件
- react demo13 (根据组件属性状态this.state实现表单实时监控)
- React的表单组件
- 浅谈react受控组件与非受控组件
- 浅谈react受控组件与非受控组件
- 浅谈React受控与非受控组件
- React表单应用--可控组件
- React 表单组件