从 OnClick 目标中获取嵌套元素反应

Question

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

使用下面的代码，我更改了按钮 appearance/color 但没有更改图标。图标嵌套在按钮元素中，如下所示：

<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 -泰德

从 OnClick 目标中获取嵌套元素反应

get nested element from OnClicks target react

javascript

element

custom-data-attribute

materialize

reactjs