ReactJS action form selection

This time I will bring you ReactJS operation form selection. What are the precautions for ReactJS operation form selection? . Here is a practical case, let’s take a look.

The requirement is to implement single selection, inverse selection, multi-selection, and clear all operations on the list

...... 
 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
 });
}

The Array.prototype.indexOf() method returns the first index where a given element can be found in the array, or -1 if it does not exist.

Grammar:

arr.indexOf(searchElement)
arr.indexOf(searchElement[, fromIndex = 0])

The Array.prototype.filter() method creates a new array containing all elements of the test implemented by the provided function.

Grammar:

var new_array = arr.filter(callback[, thisArg])

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Using timers with AngualrJs

axios handles http sending Post and get

The above is the detailed content of ReactJS action form selection. For more information, please follow other related articles on the PHP Chinese website!