React表单组件使用介绍

表单组件不同于其他原生组件,可以通过用户交互发生变化,使响应用户交互的表单数据处理更加容易。

 

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']}>。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.duanlonglong.com/qdjy/351.html