ReactJS 액션 폼 선택

php中世界最好的语言
풀어 주다: 2018-04-17 16:00:05
원래의
1688명이 탐색했습니다.

이번에는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!