时间戳

首页 > 解决方案 > 反应 onClick 接收内联样式

javascript - 反应 onClick 接收内联样式

问题描述

我正在尝试在 React 中编写一个侧边栏，当我单击该侧边栏的每个元素时，它会被激活。但是，我想用内联样式覆盖默认的 UI 库活动样式，但是我在 onClick 函数中的代码无法编译并给我一个错误。这该怎么做？

class Sidebar extends Component {
    state = {
      navActive : '0'
    }

  render () {
    return (
      <NavPanel dark style={{ backgroundColor: '#2d2e2e', height: '100vh', float:'right'}}>
        <NavTitle style={{ fontFamily: 'IranSans', textAlign: 'Center' }}>
       لوگو اینجا قرار بگیرد
        </NavTitle>
        <NavSection>
          <NavSectionTitle />
          <NavSectionTitle />

          <NavLink key='2' style={linkStyles.base} rightEl={<GiIceCube style={linkStyles.Icon} />} 

          className={this.state.navActive === '2' ? 'active' :' ' }

          onClick={() => this.setState({ navActive:'2' }, style={{ borderStyle:'solid',
          borderWidth:'0px 10px 0px 0px',
          borderColor:'green'}})}>

           داشبورد
          </NavLink>

        </NavSection>
      </NavPanel>

    )
  }
}

export default Radium(Sidebar)

标签： javascriptcssreactjsjsx

解决方案

的第二个参数setState是状态更改后执行的回调。

所以你必须根据状态指定你的风格。

      <NavLink key='2' rightEl={<GiIceCube style={linkStyles.Icon} />} 

      className={this.state.navActive === '2' ? 'active' :' ' }

      onClick={() => this.setState({ navActive:'2' })}
      style={ this.state.navActive !== '2' ? {linkSyles.base} : {
      ...linkStyles.base,
      borderStyle:'solid',
      borderWidth:'0px 10px 0px 0px',
      borderColor:'green'}
      }
       >

推荐阅读