Question

我的UI中有一个域列表。每个域都是一个按钮（可以单击并获得.active CSS样式）。域名来自服务器，我通过componentDidMount()方法获得它们。因此，我不知道组件构造时刻中将来的按钮（域）的数量。

我的目标是在用户单击时更改按钮样式（添加.active CSS类）。默认情况下，第一个按钮应处于活动状态。我可以通过数组中的索引来识别按钮。所以我的代码看起来像这样：

constructor(props) {
    super(props)
    this.state = {
        domainClasses: {}
    }
}

在componentDidMount()方法中：

componentDidMount() {
    this.props.domains.forEach((data, i) => {
        if (i === 0) {
            this.setState({
                ...this.state.domainClasses,
                [i]: `title active`
            });
        } else {
            this.setState({
                ...this.state.titleClasses,
                [i]: `title`
            });
        }
    });
}

我认为setState()方法将在state对象中添加数字属性，然后可以操纵按钮类的样式。但事实并非如此！我测试过-如果state在组件构造时不包含数值属性，将来它将在setState中忽略它。

我想可以在state周期的构造函数方法中将每个数值属性添加到forEach对象中，但是直到域来自componentDidMount中的服务器之前，我不知道域的数量...

所以，我的问题是-如果此按钮在列表中并且数量未定义直到服务器响应，如何更改按钮单击时的CSS类？

请帮忙！

Answer 1

您正在存储一个可能的巨大状态，仅用于为按钮设置活动类，为什么不只使用简单的activeButtonIdx

在构造函数中，您的初始化状态将为

this.state = {
  activeButtonIdx : 0
}

在ur渲染功能中，您可以仅提供类（假设您提到了按钮列表，因此假设它在地图内）

{
  buttons.map((d, i) => <Button className={this.state.activeButtonIdx === i ? 'active title' : 'title' } onClick={() => this.setState({activeButtonIndex : i})} key={d.id}/>)
}

如何在React中为列表元素定义CSS类？

1 个答案: