Javascript 仅处理数组中的已按下项

上图显示了我只想应用于数组中被按下的项目的样式类型

下面的代码是我到目前为止所做的。每当按下任何一个同级项时，该数组中的所有项都会不断获得应用于它们的样式。因此，我这里的问题是，我如何将我的事件（应用样式）集中到唯一按下的兄弟姐妹？此代码用于第二个gif

import React, { Component } from 'react';
import { View, Text ,StyleSheet, TouchableOpacity, } from 'react-native';
import {connect} from "react-redux"
import {itemSelect} from "../../Store/Actions/index"

 class Selections extends Component {

    state={
        highlighted: false,
        id: null
    }
// The purpose of this function is to set the state to the target index on press
indexStateHandler = (i) =>{

         this.setState({
             id: i
         })

}


    //The purpose of this function is to set styles for the targeted index
    highlightStateHandler = () =>{     

            if(this.state.highlighted == true){ 
                this.setState({
                    highlighted:false
                })

            }
            else{
                this.setState({
                    highlighted:true
                })

            }

           }

    highlightHandler = (i,options) =>{
        this.indexStateHandler(i)
        this.highlightStateHandler()
        console.log("index: "+i)
        console.log(this.state.highlighted)


       // this.props.priceEdit(options)
    }

    componentDidMount = () => {
        console.log(this.state.highlighted)
    };



  render() {
    return (
      <View style={styles.selectionWrapper}>
        <View style={styles.label}><Text style={{color: "black"}}>{this.props.label}</Text></View>
        <View style={styles.listContainer}>
        {this.props.options.map((options, i) => (
            <TouchableOpacity onPress={()=> this.highlightHandler(options.uid, options)} key={i}>
            <View style={this.state.id == options.uid ?styles.highlighted:styles.options} > <Text style={styles.text}>{options.name}</Text> </View>
            </TouchableOpacity>
              )
        )}
        </View>
      </View>
    );
  }
}

const styles= StyleSheet.create({
    selectionWrapper:{
        width: '100%',
        height: 100,
        borderWidth: 1,
        borderColor: 'red',
    },
    label:{
        flex: 1,

    }
    ,
    listContainer:{
        flex: 3,
        flexDirection: "row",
        justifyContent: "space-around",
        alignItems: 'center',
        // backgroundColor: "#7fffd4"
    },
    options:{
        borderRadius: 10,
        padding: 5,
        borderWidth: 1,
        borderColor: "#d0b783",
        // backgroundColor: ""

    },
    text:{
        color: 'black',
        textAlign: 'center'
    },

    highlighted:{
        borderRadius: 10,
        padding: 5,
        borderWidth: 1,
        // borderColor: "#d0b783",
        backgroundColor: "#d0b783"

    }
})

const mapDispatchToProps = dispatch => {
    return{
        select: (bool)=>dispatch(itemSelect(bool))
    }
}

const mapStateToProps = state => {
    return{
        id: state.cart.id
    }

}

export default connect(mapStateToProps,mapDispatchToProps)(Selections)

import React，{Component}来自'React'；
从“react native”导入{View，Text，StyleSheet，TouchableOpacity，}；
从“react redux”导入{connect}
从“./../Store/Actions/index”导入{itemSelect}
类选择扩展了组件{
陈述={
突出显示：错误，
id:null
}
//此功能的目的是将状态设置为按下时的目标索引
indexStateHandler=（i）=>{
这是我的国家({
id:我
})
}
//此函数的目的是为目标索引设置样式
highlightStateHandler=（）=>{
如果（this.state.highlighted==true）{
这是我的国家({
突出显示：错误
})
}
否则{
这是我的国家({
突出显示：正确
})
}
}
highlightHandler=（i，选项）=>{
此.indexStateHandler（i）
this.highlightStateHandler（）
console.log（“索引：+i”）
console.log（this.state.highlighted）
//this.props.priceEdit（选项）
}
componentDidMount=（）=>{
console.log（this.state.highlighted）
};
render（）{
返回(
{this.props.label}
{this.props.options.map（（options，i）=>(
this.highlightHandler（options.uid，options）}键={i}>
{options.name}
)
)}
);
}
}
const styles=StyleSheet.create({
selectionWrapper：{
宽度：“100%”，
身高：100，
边框宽度：1，
边框颜色：“红色”，
},
标签：{
弹性：1，
}
,
列表容器：{
弹性：3，
flexDirection:“行”，
为内容辩护：“周围的空间”，
对齐项目：“居中”，
//背景颜色：“7fffd4”
},
选项：{
边界半径：10，
填充：5，
边框宽度：1，
边框颜色：“d0b783”，
//背景颜色：“
},
正文：{
颜色：'黑色'，
textAlign:“中心”
},
突出显示：{
边界半径：10，
填充：5，
边框宽度：1，
//边框颜色：“d0b783”，
背景颜色：“d0b783”
}
})
const mapDispatchToProps=调度=>{
返回{
选择：（bool）=>dispatch（项目选择（bool））
}
}
常量mapStateToProps=状态=>{
返回{
id:state.cart.id
}
}
导出默认连接（mapStateToProps、mapDispatchToProps）（选项）

更新 我使用元素的索引作为目标。下面是它的代码。 根据gif，你会看到一切正常，除了当我第二次按下一个元素时（根据当前的例子，这是普通的），由于逻辑原因，它没有重新打开样式。我知道它是这样运行的，因为当当前索引和上一个索引与您在代码中看到的相同时，状态中的'booln'计算结果为false。请看一下代码，看看哪里需要改进

...
state={

    index: null,
    booln:false
}

highlightHandler = (optionIndex) => {

    this.setState(prevState =>({

        index: optionIndex,
        booln:prevState.index == optionIndex? false: true
    }))
}

 render() {
    return (
      <View style={styles.selectionWrapper}>
        <View style={styles.label}><Text style={{color: "black"}}>{this.props.label}</Text></View>
        <View style={styles.listContainer}>
        {this.props.options.map((options, i) => (
            <TouchableOpacity onPress={()=> this.highlightHandler(options.uid, options)} key={i}>
            <View style={this.state.booln&& this.state.index == options.uid? styles.highlighted:styles.options} > <Text style={styles.text}>{options.name}</Text> </View>
            </TouchableOpacity>
              )
        )}
        </View>
      </View>
    );
  }
}
...

。。。
陈述={
索引：null，
布恩：错
}
highlightHandler=（optionIndex）=>{
this.setState（prevState=>({
索引：optionIndex，
booln:prevState.index==optionIndex？false:true
}))
}
render（）{
返回(
{this.props.label}
{this.props.options.map（（options，i）=>(
this.highlightHandler（options.uid，options）}键={i}>
{options.name}
)
)}
);
}
}
...

而不是更改您的

状态。突出显示的
为
true
或
false
为什么不存储按下的
数据的
索引或
id
，然后在三元运算符中检查
id
是否等于
状态中存储的
id
。突出显示的
。此外，如果要跟踪多个按下的项，可以将它们的
id
或
索引
存储在一个数组中，并检查它们的
id
或
索引
是否在该数组中以应用样式
我将保留一个数组，其中包含数组中每个元素的状态（按下/未按下=>真/假）。默认情况下，它们都是未压缩的（false）。
然后，我会在onClick处理程序中切换press状态，并相应地进行渲染：

...
state = {
    pressed: this.props.options.map(_ => false)
}

onPress = optionIndex => {
    this.setState(prevState => ({
        pressed: prevState.pressed.map((option, index) => {
            return optionIndex === index ? !option : option
        })
    }))
}

optionStyle = optionIndex =>
    this.state.pressed[optionIndex]
    ? styles.highlighted
    : styles.options

render() {
    return (
        <View style={styles.selectionWrapper}>
            <View style={styles.label}>
                <Text style={{color: "black"}}>
                    {this.props.label}
                </Text>
            </View>
            <View style={styles.listContainer}>
                {
                    this.props.options.map((options, index) => (
                        <TouchableOpacity
                            onPress={() => this.onPress(index)}
                            key={i}
                        >
                            <View style={ this.optionStyle(index) }>
                                <Text style={styles.text}>{options.name}</Text>
                            </View>
                        </TouchableOpacity>
                    ))
                }
            </View>
        </View>
    )
}

。。。
状态={
按下：this.props.options.map（=>false）
}
onPress=选项索引=>{
this.setState（prevState=>({
按下：prevState.pressed.map（（选项，索引）=>{
返回选项索引===索引？！选项：选项
})
}))
}
选项样式=选项索引=>
此.state.pressed[选项索引]
? 样式。突出显示
：style.options
render（）{
返回(
{this.props.label}
{
this.props.options.map（（选项，索引）=>(
this.onPress（index）}
key={i}
>
{options.name}
))
}
)
}
最新问题

因此，根据我昨天发布的第二个gif，在实现的逻辑评估为true后，我在切换项目上的样式时遇到问题；那是为了重新
state={
    tracker:0,
    index: null,
    booln:false,

}

highlightHandler = (optionIndex,options) => {
    //Assigned (this.state.tracker) to the tracker variable in order of retaining value after each invocation

    let tracker=this.state.tracker
    this.state.index!==optionIndex?tracker=0:tracker++

    this.setState(prevState =>({
        tracker:tracker,
        index: optionIndex,
        booln:prevState.index == optionIndex? false: true,

    }))
}


  render() {
    return (
      <View style={styles.selectionWrapper}>
        <View style={styles.label}><Text style={{color: "black"}}>{this.props.label}</Text></View>
        <View style={styles.listContainer}>
        {this.props.options.map((options, i) => (
            <TouchableOpacity onPress={()=> this.highlightHandler(options.uid, options)} key={i}>
            <View style={(this.state.booln&& this.state.index == options.uid) ||
                 (this.state.tracker!=0 && this.state.tracker%2==0) &&this.state.index== options.uid 
                 ? styles.highlighted:styles.options} > <Text style={styles.text}>{options.name}</Text> </View>
            </TouchableOpacity>
              )
        )}
        </View>
      </View>
    );
  }
}