ReactJS의 양식에서 단일 선택, 다중 선택 및 역선택을 구현하는 방법

이 글에서는 ReactJS 구현 형태 중 단일 선택, 다중 선택, 역선택의 예시를 주로 소개하고 있어 실용적 가치가 높습니다. 도움이 필요한 친구들이 참고할 수 있습니다

이 글에서는 단일 선택, 다중 선택의 예시를 소개합니다. 그리고 ReactJS 구현 양식의 역선택이 모두에게 도움이 되기를 바랍니다.
요구 사항은 단일 선택, 역방향 선택, 다중 선택을 구현하고 목록의 모든 작업을 지우는 것입니다.

...... 
 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을 반환합니다.

구문: ​​

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

Array.prototype.filter() 메서드는 제공된 함수에 의해 구현된 테스트의 모든 요소를 ​​포함하는 새 배열을 생성합니다.

문법:

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

위 내용은 ReactJS의 양식에서 단일 선택, 다중 선택 및 역선택을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!