本篇文章主要介绍了ReactJS实现表单的单选多选和反选的示例,非常具有实用价值,需要的朋友可以参考下
本文介绍了ReactJS实现表单的单选多选和反选的示例,分享给大家,希望对大家有所帮助。
需求是对列表实现单选,反选和多选,全部清除的操作
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | ......
this .state = {
selectedStores:[],
}
......
handleClick(e){
const newSelection = e.target.value;
let newSelectionArray;
if ( this .state.selectedStores.indexOf(newSelection) > -1) {
newSelectionArray =
this .state.selectedStores.filter((s:any) => s !== newSelection)
} else {
newSelectionArray =
[... this .state.selectedStores, newSelection];
}
this .setState({
selectedStores: newSelectionArray
});
}
|
登录后复制
Array.prototype.indexOf()方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。
语法:
1 2 | arr.indexOf(searchElement)
arr.indexOf(searchElement[, fromIndex = 0])
|
登录后复制
Array.prototype.filter()方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
语法:
1 | var new_array = arr.filter(callback[, thisArg])
|
登录后复制
以上是ReactJS中表单的单选多选与反选的实现方法的详细内容。更多信息请关注PHP中文网其他相关文章!