javascript - 使用 React 添加和删除 CSS 类

Question

我是 React 的新手。我在按钮组中有几个按钮:

<div className="btn-group">
    <button className="btn btn-mini btn-default" onClick={() => this.changeDataType("type1")} >Button1</button>
    <button className="btn btn-mini btn-default" onClick={() => this.changeDataType("type2")} >Button2</button>
    <button className="btn btn-mini btn-default" onClick={() => this.changeDataType("type3")} >Button3</button>
</div>

每当用户单击其中一个按钮时，此按钮应成为事件的、选定的按钮。我发现我需要将 CSS 类 active 添加到相应的按钮，但我不确定如何实现它。

我考虑了一下。我有一个 changeDataType 函数连接到我的按钮，我在其中做一些其他的事情。然后我会在那里以某种方式操纵 CSS 吗？

所以我想我的问题是首先，如何定位我需要定位的按钮，其次，我如何使用 React 更改该按钮的 CSS。 p>

Answer 1

在状态改变时 react 重新渲染。在你的情况下，如果你想改变某些东西的外观，那么你可能想要强制另一个渲染。您可以做的是让 className 成为状态的一部分，然后在需要时更新状态，使组件使用新的 className 重新呈现。例如:

constructor() {
    super();
    this.state = {
        className: 'btn'
    }
}

render () {
    return (
        <Button className={this.state.className}>Click me</Button>
    )
}

由于 className 绑定(bind)到状态，更新状态将导致按钮使用新的 className 再次呈现。可以这样做:

updateClass() {
    let className = this.state.className;
    className = className + ' ' + 'btn-primary'
    this.setState({className})
}

这是您可以在单击按钮时调用并更新按钮的 className 的函数示例。