Comment implémenter la sélection unique, la sélection multiple et la sélection inversée dans les formulaires dans ReactJS

Cet article présente principalement des exemples de sélection unique, de sélection multiple et inversée dans les formulaires d'implémentation de ReactJS. Il est d'une grande valeur pratique. Les amis dans le besoin peuvent s'y référer

Cet article présente le single-. implémentation de sélection et de sélection multiple de formulaires dans ReactJS. J'aimerais partager avec vous des exemples de sélection inversée et j'espère que cela vous sera utile.
L'exigence est d'implémenter la sélection unique, la sélection inverse, la sélection multiple et d'effacer toutes les opérations sur la liste

...... 
 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

 });

}

La méthode Array.prototype.indexOf() renvoie le premier index d'un élément donné élément pouvant être trouvé dans l’index du tableau, ou -1 s’il n’existe pas.

Syntaxe :

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

La méthode Array.prototype.filter() crée un nouveau tableau contenant tous les éléments du test implémenté par la fonction fournie.

Grammaire :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!