如何获取芯片名称或芯片索引？

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)]}} 

它将工作。