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）可以根据索引I设置改变芯片的颜色吗？

Answer 1

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

<强>更新：

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

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

它会起作用。

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

1 个答案: