Question

我有一个切换功能，可以更改状态下的属性：

toggleSelected = () => {
    this.setState({selected:!this.state.selected})
  }

我还有一个map函数来迭代一些数据：

data.allRoomTypes.edges.map( c => 
<TouchableOpacity key={c.node.roomTypeId} onPress={this.toggleSelected}>  
   <Row style={styles.boxWithShadow}>
       <Col style={{marginLeft:160}}>
          <View style={{flex:1, flexDirection:"row"}}>
             {this.state.selected === false ? <Image style={styles.center} source={require("../../images/roomtypes/radio_btn_unselected.png")}/> : <Image style={styles.center} source={require("../../images/roomtypes/radio_btn_selected.png")}/>}
           </View>
        </Col>
   </Row>
</TouchableOpacity>
)

我想当我单击任何行时，切换将仅在该行上起作用，其他行将不会更改。但问题是，当我单击任何行时，所有行都会更改。这个问题有什么解决方案？

谢谢！

Answer 1

您的问题是您正在使用选择的相同状态变量来跟踪地图中所有组件的状态。

我会尝试这样的事情（目前我无法测试，但我想您会明白的）：

toggleSelected = (index) => {
    var selected = this.state.selected
    selected[index] = !selected[index]
    this.setState({selected:selected})
  }

data.allRoomTypes.edges.map( (c, index)  =>
<TouchableOpacity key={c.node.roomTypeId} onPress={(index) => this.toggleSelected(index)}>
   <Row style={styles.boxWithShadow}>
       <Col style={{marginLeft:160}}>
          <View style={{flex:1, flexDirection:"row"}}>
             {this.state.selected[index] === false ? <Image style={styles.center} source={require("../../images/roomtypes/radio_btn_unselected.png")}/> : <Image style={styles.center} source={require("../../images/roomtypes/radio_btn_selected.png")}/>}
           </View>
        </Col>
   </Row>
</TouchableOpacity>
)

作为您选择的状态的想法是对象{}本身，每个键代表一个代表TouchableOpacity元素的键。

注意：上面的代码假定您正在代码中某处初始化所选对象。像selected = {1:False, 2:True...}

如何在React Native中切换来自地图迭代的单个元素？

1 个答案: