Question

我有一个类别菜单，当您单击类别时更改样式，如何更改句柄，以便自动为另一个类别重置样式？

class CategoryOfMenu extends React.Component {
  constructor(props) {
    super(props);
    this.state = { itemmenu: this.props.data[0] };
  }

  handleClick(id, e) {
    this.setState({ itemmenu: this.props.data[id] });
    console.log(this.props.data[id].categorymenu);
    if (e.target.className === 'liik1') {
      e.target.className = 'liik';
    } else {
      e.target.className = 'liik1';
    }
  }

  render() {
    var categoryMenu = this.props.data.map(function(data, id) {
      return (
        <li key={id} data={data} onClick={this.handleClick.bind(this, id)}>
          {' '}{data.categorymenu}{' '}
        </li>
      );
    }, this);

    return (
      <div className="pic">
        <div className="menu">
          <h3>Menu</h3>
          <ul>
            {categoryMenu}
          </ul>
        </div>
        <ItemOfMenu data={this.state.itemmenu} />
      </div>
    );
  }
}

Answer 1

好的，有两种方法可以做到。

第一种是在你的州创建另一个道具，指示所选项目。

第二种是刷新所有选定状态并设置新状态。

这是第一种方法。

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menuItem {
  font-family: monospace;
  font-size: 18px;
  text-decoration: underline;
  cursor: pointer;
}

.isSelected {
  text-decoration: none;
  color: tomato;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

stringobject.size();

如何返回未单击React的元素的基本className

1 个答案: