ReactJS實現(xiàn)表單的單選多選和反選的示例
更新時間：2017年10月13日 09:32:03 作者：misstakau
本篇文章主要介紹了ReactJS實現(xiàn)表單的單選多選和反選的示例，非常具有實用價值，需要的朋友可以參考下
本文介紹了ReactJS實現(xiàn)表單的單選多選和反選的示例，分享給大家，希望對大家有所幫助。
需求是對列表實現(xiàn)單選，反選和多選，全部清除的操作
......
this.state = {
//初始化空數(shù)組，表示已經(jīng)選擇的
selectedStores:[],
}
......
handleClick(e){
const newSelection = e.target.value;//拿到點擊的具體一項
let newSelectionArray;//新建一個空數(shù)組
//判斷點擊項是否為選擇狀態(tài)，是的話清除選中狀態(tài)
if(this.state.selectedStores.indexOf(newSelection) > -1) {
newSelectionArray =
this.state.selectedStores.filter((s:any) => s !== newSelection)
} else {
//不是的話就加入新選擇數(shù)組
newSelectionArray =
[...this.state.selectedStores, newSelection];
}
this.setState({
// 新選擇數(shù)組統(tǒng)一改為選中狀態(tài)
selectedStores: newSelectionArray
});
}
Array.prototype.indexOf()方法返回在數(shù)組中可以找到一個給定元素的第一個索引，如果不存在，則返回-1。
語法：
arr.indexOf(searchElement) arr.indexOf(searchElement[, fromIndex = 0])
Array.prototype.filter()方法創(chuàng)建一個新數(shù)組, 其包含通過所提供函數(shù)實現(xiàn)的測試的所有元素。
語法：
var new_array = arr.filter(callback[, thisArg])
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
在React中,解析HTML標(biāo)簽通常是使用JSX（JavaScript XML）語法的一部分,這篇文章主要介紹了React 用來解析html 標(biāo)簽的方法,本文通過示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08
這篇文章主要介紹了react項目引入antd框架方式以及遇到的一些坑，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
在React中,通過自定義Hook useTimeHook實現(xiàn)定時器的啟動與清除,在App組件中使用Clock組件展示當(dāng)前時間,利用useEffect鉤子在組件掛載時啟動定時器,同時確保組件卸載時清除定時器,避免內(nèi)存泄露,這種方式簡化了狀態(tài)管理和副作用的處理2024-10-10
react的ui庫antd中form表單使用SelectTree反顯問題及解決
這篇文章主要介紹了react的ui庫antd中form表單使用SelectTree反顯問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
詳解在React中跨組件分發(fā)狀態(tài)的三種方法
這篇文章主要介紹了詳解在React中跨組件分發(fā)狀態(tài)的三種方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
React 的調(diào)和算法Diffing 算法策略詳解
React的調(diào)和算法，主要發(fā)生在render階段，調(diào)和算法并不是一個特定的算法函數(shù)，而是指在調(diào)和過程中，為提高構(gòu)建workInProcess樹的性能，以及Dom樹更新的性能，而采用的一種策略，又稱diffing算法2021-12-12
React配置Redux并結(jié)合本地存儲設(shè)置token方式
這篇文章主要介紹了React配置Redux并結(jié)合本地存儲設(shè)置token方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
本篇文章主要介紹了React組件通信詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2021-10-10
ReactNative 之FlatList使用及踩坑封裝總結(jié)
本篇文章主要介紹了ReactNative 之FlatList使用及踩坑封裝總結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了react+tsx中使用better-scroll,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09