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