从OnClicks目标获取嵌套元素做出反应

Question

我正在尝试更改Button的外观onClick然后将有另一个按钮来根据检查保存集合然后发送到数据库。

使用下面的代码我有按钮改变外观/颜色但不改变图标。图标嵌套在按钮元素中，如下所示：

<td key={i}>
  <button 
    onClick={this.schedulerTableTimeChange}
    className="waves-effect waves-light btn"
  >
    <i className="material-icons">check_box</i>
  </button>
</td>

因此可以使用item.target获取整个元素并使用item.target.className = x更改颜色，但我也想更改嵌套<i>child</i>的子元素以更改图标。我怎样才能做到这一点？

这是我的整个onClick：

schedulerTableTimeChange(item){
  const green = 'waves-effect waves-light btn';
  const red = 'waves-effect waves-light red btn';

  if(item.target.className === red){
    item.target.className = green
    //change <i> child here here
  }else if(item.target.className === green){
    item.target.className = red
    //change <i> child here here
  }
}

还使用materialize-css来计算基于className的颜色和图标变化

Answer 1

我会建议一个Button组件，如下所示：

import React, { Component } from "react";

class Button extends Component {

  state = { checked: false };

  clickHandler = e => {
    this.setState({ checked: !this.state.checked });
    if (this.props.onClick) {
      this.props.onClick(e);
    }
  };

  render() {
    const { checked } = this.state;
    const green = "waves-effect waves-light btn";
    const red = "waves-effect waves-light red btn";
    return (
      <button onClick={this.clickHandler} className={checked ? green : red}>
        <i className="material-icons">
          {checked ? "check_box" : "somethingelse"}
        </i>
      </button>
    );
  }
}

export default Button;

当然，将somethingelse更改为正确的图标名称... Here's a demo

HTH -Ted