已更新

Question

上图显示了样式类型，我只想将其应用于按数组排列的项目。

下面的代码是我到目前为止所做的。每当按下任何同级兄弟时，数组中的所有项都会不断应用样式。所以我的问题是，如何将我的事件（应用样式）集中到唯一按下的兄弟姐妹上？该代码用于第二个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或group = smsbox-route smsbox-id = smsbox smsc-id = XXXXXX; //name of the smsc是否在该数组中以应用样式

Answer 2

我将使用数组中每个元素的状态（按下/未按下=> true / false）保留数组。默认情况下，它们都未按下（false）。然后，我将在onClick处理程序上切换印刷状态并进行相应渲染：

...
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>
    )
}

Answer 3

最新问题

因此，根据我昨天发布的第二张gif图像，在实现的逻辑评估为true后，我无法切换项目的样式；如先前的更新代码所示，当上一个索引和当前索引的值为true时，这将删除样式。代码让我陷入的困境是，一旦索引的先前状态与当前状态相等，我就无法调用任何其他更改，因为如果我继续按相同的项目，索引将始终处于状态

最新解决方案

我现在要做的是，通过在函数中创建一个计数器变量（跟踪器）以及在状态中创建一个跟踪器变量来跟踪项目被按下的次数（目的是保留跟踪器的值）。我还必须找到一种方法，每当我按下另一个项目（同级）时将计数器重置为0，而实现此目的的唯一方法是检查先前的索引（this.state.index）是否不等于当前索引。（optionIndex）。

在那之后，剩下要做的就是弄清楚如何在连续按下一个项目（同级）时继续切换样式。然后，我通过在渲染函数中设置一个条件来映射切换的行为，该条件在经过一定次数（跟踪器的目的）后按下该项目后评估为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>
    );
  }
}

仅处理数组中的按下项目

已更新

3 个答案: