代码之家 › 专栏 › 技术社区 › KellysOnTop23

从OnClicks target react获取嵌套元素

custom-data-attribute materialize element reactjs javascript

0

KellysOnTop23 · 技术社区 · 7 年前

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

1 回复 | 直到 7 年前

1

Ted 7 年前

我建议使用一个按钮组件,如下所示:

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公司 -特德