react实现单选框、复选框和下拉框
react和vue已经是当下前端开发领域的主流框架。确实极⼤程度的提⾼了开发效率。在博⽂中详细叙述了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部分的代码如下：
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>
)
}
}
<FlavorForm/>,
)
</script>
由以上代码可以看到，监听每个input标签的onChange事件，并在相应函数⾥更新组件状态。
三、多选框
多选框的实现⽅式和单选框类似，也可以通过监听各input标签的onChange事件来实现。其body部分的标签如下所⽰。
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"
react开发框架onChange={this.handleChange}/>pear</label><br/>
<div>Chosen : {this.state.value.join('-')}</div>
</div>
)
}
}
<CheckBox/>,
)
</script>
从代码中可以看到，我们定义了⼀个组件状态value，其值是⼀个数组，存放着选中信息。需要注意的
是，在handleChange函数中，更新value时，必须使⽤setState函数，否则代码不会被重新渲染，在return中显⽰已选中的选项不会实时更新。
四、下拉框
下拉框的实现⽅式和单选框、复选框类似，这⾥直接以⼀个例⼦说明，其body部分的代码如下：
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>
)
}
}
<FlavorForm/>,
)
</script>
以上代码中，组件状态value给了⼀个默认值，并在return中的select标签中使⽤，这些实现的是⼀个默认选中的功能。
总之，利⽤react实现表单的原理都是相同的，利⽤⼀个组件状态来存储选中信息，然后监听各input标签的onChange事件。并在响应函数中更新组件状态。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。