主页 / 问题 / 1155160
Accepted
Денис Беспалов
Asked:2020-07-20 21:20:22 +0000 UTC2020-07-20 21:20:22 +0000 UTC

如何在 React 中使按钮可点击？

  • 772

诡计问题。所有按钮都是通过 .map() 函数从传入数据呈现的，即 大多数方法对我不起作用。

我试图将标志存储在状态中并根据它更改类，但随后所有按钮的类立即更改，因为 使用 .map()。如何解决问题？

reactjs

1 个回答

  1. Best Answer

    问题是这样解决的：

    在类构造函数中，我们编写：

      this.state = {
        clname: 'name0'
    }

    在按钮中，我们编写了分配类和 onclick 的条件：

    className={(this.state.clname === 'name' + (item.id)) ? style.activeBTN : ' '} 
onClick={(e) => this.onClickBTN(item.id)}

    实际上，单击按钮时调用的函数

    onClickBTN(id) {
this.setState({clname: 'name' + id})
}

    因此，id 为 0 的按钮最初处于活动状态（突出显示）。在最初设置的状态 ( clname: 'name0')

    单击按钮时，我们将其更改name0为带有按钮 id 的名称。例如clname: 'name2'. 因此，只有具有 id2 的按钮才会与类匹配条件。

    • 0

相关问题