从OnClicks target react获取嵌套元素

我正在尝试更改按钮的外观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