诸如<input> 、<textarea> 、<option> 这样的表单组件不同于其他组件,因为他们可以通过用户交互发生变化。这些组件提供的界面使响应用户交互的表单数据处理更加容易。
交互属性
表单组件支持几个受用户交互影响的属性:
在 HTML 中<textarea> 的值通过子节点设置;在 React 中则应该使用 value 代替。 表单组件可以通过onChange 回调函数来监听组件变化。当用户做出以下交互时,244)">onChange执行并通过浏览器做出响应:
和所有 DOM 事件一样,所有的 HTML 原生组件都支持 onChange 属性,而且可以用来监听冒泡的 change 事件.
对于<input> 和<textarea> ,onChange应当被用于取代DOM内置的onInput事件处理
不可控组件和可控组件
可控组件
设置了 value 的<input> 是一个受限组件。 对于受限的<input> ,渲染出来的 HTML 元素始终保持 value 属性的值。
render: function() {
return <input type="text" value="Hello!"/>;
}
上面的代码将渲染出一个值为 Hello! 的 input 元素。用户在渲染出来的元素里输入任何值都不起作用,因为 React 已经赋值为 Hello!。如果想响应更新用户输入的值,就得使用 onChange 事件
getInitialState: return {value: 'Hello!'};
},handleChange: function(event) {
this.setState({value: event.target.value});
},render: var value = this.state.value;
{value} onChange={this.handleChange} />;
}
Default Value
初始值是状态中的value。如果要取数据,可直接使用 var inputValue = this.state.value。
defaultValue={this.state.value}/>;
}
一个可控组件并不保持自己的原始状态;组件的呈现完全基于属性。
实例
var Kekong = React.creatClass({
getInitialState:function(){
return {
dada:'shuaige'
}
},handleChange:function(e){
this.setState({
dada:e.target.value
});
},submitHandler:function(e){
e.preventDefault();
alert(this.state.dada);
},render:form onSubmit={this.submitHandler}> <{this.state.dada} {this.handleChange} /> <button "submit">speak</button> </form>;
}
});
ReactDOM.render(<Kekong />,document.body);
不可控组件
没有设置value(或者设为null) 的<input> 组件是一个不可控组件。这样的话,组件中的数据和state中的数据并不对应,可以说,组件的数据不可控。
"text" />;
}
上面的代码将渲染出一个空值的输入框,用户输入将立即反应到元素上。和受限元素一样,使用 onChange 事件可以监听值的变化。
如果想给组件设置一个非空的初始值,可以使用 defaultValue 属性。 数据在这里并没有存贮在状态中,而是写在input中。
"Hello!" />;
}
如果要拿到input中的value,需先拿到其DOM节点,然后获取其value值
varinputValue = React.findDOMNode(this.refs.input).value
上面的代码渲染出来的元素和受限组件一样有一个初始值,但这个值用户可以改变并会反应到界面上。 同样,<input type="checkbox"> 和<input type="radio"> 支持defaultChecked属性,<select> 支持设置defaultValue。
defaultValue 和defaultChecked 属性只能在初始的render函数中使用,如果你要在随后的render函数中更新value值,你需要使用可控组件。
var UnKekong = React.creatClass({
submitHandler:function(e){
e.preventDefault();
var helloUnke = React.findDOMNode(this.refs.helloUnke).value;
alert(helloUnke);
},0)">onsubmit=ref="helloUnke" "Dada shuaige" /> <form>;
}
})
React.render(<Unkekong />,document.body);
Checkbox和Radio的潜在问题
注意,在试图改变正常处理Checkbox和Radio input时,React用一个click事件来代替change事件。大多数情况下,这种行为与预期相同,除了调用preventDefault时。preventDefault从视觉上阻止浏览器更新input,即使checked被触发。它可以在移除调用preventDefault与用setTimeout来切换checked中起作用。
Why use Controlled Components
组件可控的优点:
表单元素
<label htmlFor="name">Name</label> 要注意for是js关键字,要写成htmlFor。具体JSX语法在之间笔记中有介绍,传送门:React.js学习笔记之JSX解读。现在多数提示用input的placeholder属性替代。
-
<input type="" onChange={this.handleChange}/>
-
<textarea onChange={this.handleChange}/>
-
<select onChange={this.handleChange}><option></option></select>
实例
可以去查看实例代码,传送门:React表单Demo
var MyForm = React.createClass({
getInitialState:function(){
return {
username:'',gender:'man',checked:true
};
},handleUsernameChange:function(e){
this.setState({
username:e.target.value
});
},handlerGenderChange:this.setState({
gender:e.target.value
});
},handleCheckedChange:this.setState({
checked:e.target.checked
});
},0)">function (e) {
e.preventDefault();
console.log(this.state);
},0)">function () {
label htmlFor="username">请输入用户名</label> <{this.handleUsernameChange} {this.state.username} id="username"/> <br/> <select {this.handlerGenderChange} {this.state.gender}> <option "man">男</option> <"woman">女</option> </select> <"checkbox">大大是帅哥吗</"checkbox" "大大是帅哥" checked={this.state.checked} {this.handleCheckedChange} "checkbox"/> <"submit">提交</form> } }); ReactDOM.render(<MyForm />,document.getElementById('reactDemo'));
事件处理函数
onChange={this.handleChange}
若有多个元素要运用事件处理函数,常规的方法是编写多个onChange事件。这么写的话会导致代码维护比较困难并且也非常冗余。更好的做法是把事件处理函数编写为一个。可以采用bind复用和name复用这两种方法。
bind复用
handleChange:function(name,event){
......
}
onChagne={this.handleChange.bind(this,'input')}
书写简单,但需要对bind() 机制熟悉,性能相对要好。
实例
var MyForm = React.createClass({
getInitialState:return {
username:true
};
},event){
var newState={};
newState[name]=name=="checked"?event.target.checked:event.target.value;
this.setState(newState);
},0)">function (e) {
e.preventDefault();
this.state);
},0)">function () {
{this.handleChange.bind(this,"username")} name复用
function (event){
var name = event.target.name
}
onChange={this.handleChange}
相比Bind写法会少一些参数,在函数中需要读取表单的name值,需要添加name属性。
function(event){
var newState={};
newState[event.target.name]=event.target.name==name="username" {this.handleChange} "gender" "checked" 自定义表单组件
自定义表单组件能让我们更好的使用组件,让我们更好的开发网页。
why 自定义表单组件?
自定义表单组件的原因:
小结
本文主要简单介绍了表单组件的一些用法。 (编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|