react和vue已经是当下前端开发领域的主流框架。确实极大程度的提高了开发效率。在博文 vue.js实现单选框、复选框和下拉框中详细叙述了vue实现表单的基本原理。本文将利用react实现相同功能。
一、react开发模板
使用react进行网页开发，其基本结构如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../source/react.js"></script>
<script src="../source/react-dom.js"></script>
<script src="../source/browser.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
//todos
</script>
</body>
</html>在head部分，引入了三个非常重要的js文件。其作用分别为：
- react.js：React的核心库
- react-dom.js：提供与DOM相关的功能
- browser.js：实现JSX语法向JavaScript语法的转换
另一个值得注意的地方在于body标签内，script标签的type属性设置为：text/babel。这是因为react的JSX语法与JavaScript语法不兼容，凡是用到JSX语法的地方都需要设置type属性。
二、react实现单选框
在HTML当中，一些表单元素会根据用户的输入更新某些属性值。而在react中，这些可变的状态通常保持在组件的状态属性中，并且只能用setState( )方法更新。
利用react实现单选框，其body部分的代码如下：
<div id="root"></div>
<script type="text/babel">
class FlavorForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
render() {
return (
<div>
<label > <input type="radio" name='gender' value="Man"
onChange={this.handleChange}/>Man</label><br/>
<label > <input type="radio" name='gender' value="Women"
onChange={this.handleChange}/>Women</label>
<div>gender: {this.state.value}</div>
</div>
)
}
}
ReactDOM.render(
<FlavorForm/>,
document.getElementById('root')
)
</script>由以上代码可以看到，监听每个input标签的onChange事件，并在相应函数里更新组件状态。
三、多选框
多选框的实现方式和单选框类似，也可以通过监听各input标签的onChange事件来实现。其body部分的标签如下所示。
<div id="root"></div>
<script type="text/babel">
class CheckBox extends React.Component {
constructor(props) {
super(props);
this.state = {value: []};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
let item = event.target.value;
let items = this.state.value.slice();
let index = items.indexOf(item);
index === -1 ? items.push(item) : items.splice(index, 1);
this.setState({value: items});
}
render() {
return (
<div>
choose fruit：<br/>
<label><input type="checkbox" name="fruit" value="apple"
onChange={this.handleChange}/>apple</label><br/>
<label><input type="checkbox" name="fruit" value="banana"
onChange={this.handleChange}/>banana</label><br/>
<label><input type="checkbox" name="fruit" value="pear"
onChange={this.handleChange}/>pear</label><br/>
<div>Chosen : {this.state.value.join('-')}</div>
</div>
)
}
}
ReactDOM.render(
<CheckBox/>,
document.getElementById('root')
)
</script>从代码中可以看到，我们定义了一个组件状态value，其值是一个数组，存放着选中信息。需要注意的是，在handleChange函数中，更新value时，必须使用setState函数，否则代码不会被重新渲染，在return中显示已选中的选项不会实时更新。
四、下拉框
下拉框的实现方式和单选框、复选框类似，这里直接以一个例子说明，其body部分的代码如下：
<div id="root"></div>
<script type="text/babel">
class FlavorForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: 'basketball'};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value});
}
render() {
return (
<div>
<label>choose favorite sports：
<select value={this.state.value} onChange={this.handleChange}>
<option value="running">running</option>
<option value="basketball">basketball</option>
<option value="skiing">skiing</option>
</select>
</label>
<div>chosen: {this.state.value}</div>
</div>
)
}
}
ReactDOM.render(
<FlavorForm/>,
document.getElementById('root')
)
</script>以上代码中，组件状态value给了一个默认值，并在return中的select标签中使用，这些实现的是一个默认选中的功能。
总之，利用react实现表单的原理都是相同的，利用一个组件状态来存储选中信息，然后监听各input标签的onChange事件。并在响应函数中更新组件状态。