私は私のアプリでマップ機能を持っている

Question

選択項目ReactJSの色を変更する方法：

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作成時にindexに配列が存在するかどうかをチェックします。色。

アレイに要素を追加または削除するにはどうすればよいですか？

そのためには、onClick関数 "item of index"で追加のパラメータを渡し、そのインデックスを使ってadd/remove要素を渡す必要があります。

ステップ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/