Question

我的应用程序上有一个地图功能：

list.map((item, index) => {
    return (
       <View key={index}>
           <Text 
               style={ this.state.active ? listStyle.listDone : listStyle.list } onPress={() => this.changeStatus(index)}
           > 
               {item} 
           </Text>
       </View>
    )
})

我想在点击当前项目i时更改颜色。

Answer 1

由于您要选择多个项目，而不是使用单个状态值控制元素，请使用数组。

将所选索引存储在状态数组中，每当用户点击任何新项目时，将其索引放在该数组中，否则将其删除，并在创建ui期间检查数组中是否存在索引，并在此基础上指定颜色。

如何在数组中添加或删除元素？

为此你需要在onClick函数中传递一个额外的参数“item of index”并使用该索引添加/删除元素。

<强>步骤1：

Define indexes = [] in state;

<强>步骤2：

list.map((item, index) => {
    return (
        <View key={index}>
           <Text 
               style={ this.state.indexes[index] ? listStyle.listDone : listStyle.list } 
               onPress={() => this.changeStatus(index)}> {item} </Text>
        </View>
    )
})

onclick(index) {
    let indexes = this.state.indexes.slice(0);
    if(indexes.indexOf(index) == -1)
        indexes.push(index);
    else{
        let id = indexes.indexOf(index);
        indexes.splice(id, 1)
    }
    this.setState({indexes});
}

请参阅此示例工作jsfiddle：https://jsfiddle.net/mayankshukla5031/17h4Lz5u/

如何更改所选项目的颜色ReactJS

1 个答案: