Question

例如，只需将活动类btw切换为li即可。但不是路由器。我有这样的列表它不是map（）方法的cicle。这是静态列表。

 constructor(props) {
        super(props);
        const parsedUrlQuery = window.location.pathname;
        this.state = {
            isActive: true
        }
    }

  <ul className='bread list-inline'>
       <li className={this.state.isActive ? 'navigation--active' : ''}>All projects</li>
       <li> My projects</li>
  </ul>

问题是我不知道如何删除和添加静态列表的类。你可以帮助我吗？

Answer 1

你必须以某种方式改变state。按钮单击，输入更改甚至来自某种子组件处理程序。

在此示例中，我在每个onClick元素中使用li来触发此类状态更改：

＆＃13;

class App extends React.Component {
  constructor() {
    super()

    this.state = {
      activeItem: -1,
      items: ['All Projects', 'My Projects'],
    }
  }

  handleItemClick(index) {
    this.setState({
      activeItem: index,
    })
  }

  render() {
    return (
      <div>
        <ul className='bread list-inline'>
          {this.state.items.map((item, index) =>
            <li
              key={index}
              className={this.state.activeItem === index ? 'navigation--active' : ''}
              onClick={this.handleItemClick.bind(this, index)}
            >
              {item}
            </li>
          )}
        </ul>
      </div>
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
)

＆＃13;

ul > li {
  cursor: pointer;
}

li.navigation--active {
  text-decoration: underline;
}

＆＃13;

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

＆＃13;

Answer 2

让你的李低于

<li className={this.state.isActive ? 'navigation--active' : ''}>All projects</li>

现在将你改为LI以及添加OnClick功能＆＃34; liCkickFun＆＃34;

    <li className='navigation--active' onClick={this.liCkickFun}>All projects</li>

现在在您的组件中添加以下功能

liCkickFun = (event) => {
  //check if clicked element has active class then remove it 
  //and if don't has class then add it
     if(event.target.classList.contains('navigation--active')){
       event.target.classList.remove('navigation--active');
     } else { 
       event.target.classList.add('navigation--active');         
     }
}

希望这会有所帮助：）

如何在reactjs中添加和删除列表的添加类？

2 个答案: