이번에는 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 자료:
처리위 내용은 ReactJS 액션 폼 선택의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!