react给当前元素动态添加样式

Question

handleKeyboardTouchStart = () => {
    this.setState({
      setTelTouch_backgroundColor: true
    })
  }

code....

let itemEls = group.map((item, iIndex) => {
    return (
      <Tappable
        component="li"
        key={`item-${gIndex}-${iIndex}`}
        styleName="digit-item"
        onTouchStart = {this.handleKeyboardTouchStart}
        onTouchEnd={this.handleKeyboardTouch(item)}
      >
        <div styleName={this.state.setTelTouch_backgroundColor ? 'telTouchBackgroundColor':'hideIcon'}>
          0
          </div>
      </Tappable>
    );
}

预期功能是点击当前的div标签，让当前的div标签有telTouchBackgroundColor类名，但是在实现过程中点击某个div之后所有的div都有了这个类。

怎么样让当前的div只有这个类名？？？

Answer 1

你这样实现肯定是所有的都跟着这个 this.state.setTelTouch_backgroundColor 变。
我觉得实现的话，简单想到了两个，一个是直接对你获取到的那个 item 操作，应该是可以的，另一个就是，给它们都设置一个 state，比如一个数组 this.state.colors

---

直接获取到元素改了 backgroundColor 的值，不知道是不是你想要的，上面说的设置 State 的方法，试了不是很好做，有点儿本末倒置，不过先不删，以后我有更好的解决办法再来改。

直接看 CodePen 吧

Answer 2

问题已经解决，谢谢 @liangzr 的帮助，感觉代码还不是很完美所以贴出来请大家指点。

在Tappable中用ref配合index表明每个div的区别。

然后在onTouchStart & onTouchEnd事件中分别以当前的index作为参数，获取到对应的当前元素并设置样式

<Tappable
    component="li"
    key={`item-${gIndex}-${iIndex}`}
    styleName="digit-item"
    onTouchStart = {(index)=>this.handleKeyboardTouchStart(iIndex)}
    onTouchEnd={(value,index)=>this.handleKeyboardTouch(item,iIndex)(event)}
      >
    <div ref={(div)=>{this[`btn-${iIndex}`] = div}} styleName={spaceHold && 'fixMate9'}>
      {spaceHold ? '0' : item}
      </div>
</Tappable>

handleKeyboardTouchStart = (gindex,index) => {
    this[`btn-${gindex}-${index}`].style.backgroundColor="#a9b0bd";
  }