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

Question

1)我正在使用以下方法创建多个芯片(Material Design)。在React中

<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

您可以将index或value直接bind到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);
}

更新

要为芯片指定不同的颜色，请首先在To数组中定义颜色代码，如下所示：

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

然后使用Math.floor(Math.random() * colors.length);在0 to colors.length的范围内随机选择一个no，将该颜色分配给芯片，如下所示：

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

看起来不错。