javascript - 将事件类添加到 react 中的按钮

Question

我试图在 react 中向我的按钮添加一个事件类，但是这不会添加我的类，并且当我单击按钮时不会执行任何操作。

我在控制台中没有收到任何错误，并且我有类似的单选按钮代码，该代码确实有效，但我不确定如何修改该代码以适用于我的按钮组。

我可以在 react 开发工具中看到我的类(class) nav-active已按预期应用于第一个按钮，但我没有在按钮上看到黑色背景颜色:

<Styled.button isActive="1" className="nav-active onChlick=bound setActiveTab()>

 const TestBtn = styled(Button)`
  height:40px;
  width:auto;
  background:#ff00ff;
`

class TopCategories extends React.Component {

  constructor() {
    super()
    this.state = { isActive: 1 }
    this.setActiveTab = this.setActiveTab.bind(this)
  }

  setActiveTab(id) {
    this.setState({ isActive: id })
 }

  render() {
    const items = [
  { id: 1, name: 'tab-1', text: 'text', value: '1' },
  { id: 2, name: 'tab-2', text: 'text', value: '2' },
  { id: 3, name: 'tab-3', text: 'text', value: '3' },
  { id: 4, name: 'tab-4', text: 'text', value: '4' },
  { id: 5, name: 'tab-5', text: 'text', value: '5' },
]

const tabs = items.map(item =>
  <div key={item.id}>
    <TestBtn
      isActive={item.id}
      className={this.state.isActive === item.id ? 'nav-active' : ''}
      onClick={this.setActiveTab}
    >
      {item.name}
    </TestBtn>
  </div>,
)

return (
  <Container>
    <Wrapper>
      {tabs}
    </Wrapper>
  </Container>
)
}
}


export default TopCategories

styles.css

.nav-active { background:#000;}    

Answer 1

您只需在函数 setActiveTab(id) 中发送您的 ID。

onClick={() => this.setActiveTab(item.id)}

我建议您将 key 从 item.id 更改为使用箭头功能发送的索引。

const tabs = items.map(item => // const tabs = items.map((item, index) =>
  <div key={item.id}> // <div key={index}>
    <TestBtn
      isActive={item.id}
      className={this.state.isActive === item.id ? 'nav-active' : ''}
      onClick={this.setActiveTab}
    >
      {item.name}
    </TestBtn>
  </div>, // what is , ?
)