칩 또는 칩 인덱스에 이름을 가져 오는 방법은 무엇입니까?

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

다음과 같이 칩, 0 to colors.length의 범위에서 임의의 어떤을 선택하는 색상을 지정 Math.floor(Math.random() * colors.length);를 사용 : 그것은 작동

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

.