チップの名前またはチップのインデックスを取得するには？

Question

1）私は、以下の方法を使用して複数のチップ（材料設計）を作成しています。リアクト

<div style={styles.wrapper} className="container"> 

    { 
     arrayName.map((row, index)=>(
     <Chip 
     style={styles.chip} 
     key={index} 
     onTouchTap={handleTouchTap} 
     > 

     {row.name} 
     </Chip> 
    )) 
    } 

</div> 

では、私が使用してイベントハンドラから値を取得することはできませんよ「event.target.value」 は、チップ上の値を取得するための別の方法はありますか？

arrayName contains name of programming languages like Angular, React etc. 

2）インデックスに基づいてチップの色を変更できますか？

Answer 1

bindindexまたはvalueから直接onTouchTapに直接アクセスできます。名前バインディング

：

<div style={styles.wrapper} className="container"> 
    { 
     arrayName.map((row, index)=>(
      <Chip 
      style={styles.chip} 
      key={index} 
      onTouchTap={this.handleTouchTap.bind(this, row.name)} 
      >  
      {row.name} 
      </Chip> 
    )) 
    } 

</div> 

handleTouchTap(name){ 
    console.log('name:', name); 
} 

結合ランキング：

<div style={styles.wrapper} className="container"> 
    { 
     arrayName.map((row, index)=>(
      <Chip 
      style={styles.chip} 
      key={index} 
      onTouchTap={this.handleTouchTap.bind(this, index)} 
      > 
      {row.name} 
      </Chip> 
    )) 
    } 
</div> 

handleTouchTap(index){ 
    console.log('name:', arrayName[index].name); 
} 

更新：

が最初にカラーコードを定義し、チップに異なる色を割り当てることこのように配列する：

let colors = ['#color1', '#color2', '#color3', '#color4'....]; 

次に、このようにチップにその色を割り当て、0 to colors.lengthの範囲でランダムなノーを選択するMath.floor(Math.random() * colors.length);を使用します。

style={{backgroundColor: colors[Math.floor(Math.random() * colors.length)]}} 

それは動作します。