如何獲取芯片名稱或芯片索引？

Question

1）我使用以下方法創建多個芯片（Material Design）。在陣營

<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'....]; 

然後使用Math.floor(Math.random() * colors.length);選擇一個隨機沒有在0 to colors.length的範圍內，指定該顏色湊錢這樣的：

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

它將工作。