javascript - 仅处理数组中按下的项目

Question

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

下面的代码是我到目前为止所做的。每当其 sibling 中的任何一个被按下时，数组中的所有项目都会不断获得应用于它们的样式。所以我的问题是，如何将事件(应用样式)集中到唯一按下的同级？此代码用于第二个 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)

已更新

我使用元素的索引进行定位。下面是它的代码。 根据 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>
    );
  }
}
...

Answer 1

而不是改变你的 state.highlighted到 true或false为什么不存储 index或id data的按下，然后在三元运算符中检查 id 是否等于 id存储在 state.highlighted 。此外，您想跟踪多个按下的项目，您可以存储它们的 ids或index在一个数组中并检查它们是否 id或index位于该数组中以应用样式