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

Question

1) 我正在使用以下方法创建多个芯片( Material 设计)。在 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 函数，并直接访问该值。

绑定(bind)名称:

<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到colors.length范围内随机取一个数，赋值那种颜色像这样碎裂:

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

它会起作用。