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() 메서드는 배열에서 특정 요소를 찾을 수 있는 첫 번째 index를 반환하거나 해당 요소가 없으면 -1을 반환합니다.

문법:

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

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

문법:

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

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

AngualrJs와 함께 타이머 사용

axios에서 http 전송 Post 및 get

처리

위 내용은 ReactJS 액션 폼 선택의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!