zoukankan      html  css  js  c++  java
  • react 给选中的li添加样式(转载)

    路:使用事件委托,
    关键:获取到的index必须转为数字,因为它是字符串
    handleClick = (e) => {
    const nodeName = e.target.nodeName.toUpperCase()
    let tag = e.target;
    if (nodeName === 'LI') {
    let index = parseInt(tag.getAttribute('index'))
    this.setState({
    currentIndex: index
    })
    }
    }


    import React from 'react'
    import './nav.scss'

    class NavCom extends React.Component {
    constructor(props) {
    super(props)
    this.state = {
    currentIndex: 0
    }
    }
    sestCurrentStyle = (index) => {
    return this.state.currentIndex === index ? 'current' : ''
    }
    handleClick = (e) => {
    const nodeName = e.target.nodeName.toUpperCase()
    let tag = e.target;
    if (nodeName === 'LI') {
    let index = parseInt(tag.getAttribute('index'))
    this.setState({
    currentIndex: index
    })
    }
    }
    render() {
    const navList = this.props.navList
    return (
    <div className='nav-wrap' onClick={(e)=>this.handleClick(e)}>
    {
    navList && navList.map( (item, index) => {
    return (
    <li key={index} index={index} className={this.state.currentIndex === index ? 'current' : ''}>{item}</li>
    )
    })
    }
    </div>
    )
    }
    }
    export default NavCom
  • 相关阅读:
    20140327工作室日志
    20140326学习工作室日志
    标准连接池实现
    JDBC
    监听器
    数据表多对多
    MATLAB 中几个颜色空间的坐标范围
    RabbitMQ(一)
    Web Service之Axis(二)
    Web Service之CXF(四)
  • 原文地址:https://www.cnblogs.com/snowhite/p/12491455.html
Copyright © 2011-2022 走看看