So implementieren Sie Einzelauswahl, Mehrfachauswahl und Rückwärtsauswahl in Formularen in ReactJS

In diesem Artikel werden hauptsächlich Beispiele für Einzelauswahl, Mehrfachauswahl und umgekehrte Auswahl in ReactJS-Implementierungsformen vorgestellt. Es ist von großem praktischem Wert. Freunde in Not können sich darauf beziehen.

In diesem Artikel wird die Einzelauswahl vorgestellt. Auswahl- und Mehrfachauswahl-Implementierung von Formularen in ReactJS Ich möchte Ihnen Beispiele für die umgekehrte Auswahl vorstellen und hoffe, dass sie für Sie hilfreich sind.
Die Anforderung besteht darin, eine Einzelauswahl, eine inverse Auswahl, eine Mehrfachauswahl zu implementieren und alle Vorgänge in der Liste zu löschen.

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

 });

}

Die Methode Array.prototype.indexOf() gibt den ersten Index eines gegebenen Werts zurück Element, das im Array-Index gefunden werden kann, oder -1, wenn es nicht existiert.

Syntax:

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

Die Methode Array.prototype.filter() erstellt ein neues Array, das alle Elemente des von der bereitgestellten Funktion implementierten Tests enthält.

Syntax:

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

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Einzelauswahl, Mehrfachauswahl und Rückwärtsauswahl in Formularen in ReactJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!