Question

我是新来的反应者，遇到麻烦要实现一些简单的事情。我有3个带有初始黑色bg色的盒子，

我需要，每当用户单击其中一个框时，仅所选框的颜色将变为白色，而其他元素保持初始颜色，如果第一个框更改了颜色，然后我们单击了第二个框，因此，第一个框恢复为初始颜色，第二个框恢复为白色。

这是我到目前为止所做的：

import React from 'react'
import { CardContainer, Title } from './business-item.styles';
import './business-item.style.scss';

class BusinessItem extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            isActive: false
         };
        this.changeColor = this.changeColor.bind(this);
    }

    changeColor() {
        this.setState({ isActive: true });
    }

    render() {
        const {isActive} = this.state;
        return (
            <CardContainer 
              className={isActive ? 'choosen' : 'not-choosen'} 
              onClick={this.changeColor}>
                <Title>{this.props.title}</Title>
            </CardContainer>
        )
    }
}


export default BusinessItem;

我正在尝试创建以下屏幕：

app_screens

Answer 1

您要lift up state。这些按钮不是彼此独立的。它们需要由其父组件一起控制。像这样：

with_items: "{{ kos_pod.stdout_lines }}"`

Answer 2

您可以提升状态来跟踪点击的活动项目

  const BusinessItemContainer = ({businessItems}) => {
        const [activeIndex, setActiveIndex] = useState(null)

        return <>
            {
                businessItems.map((title, index) => <BusinessItem key={item} index={index} title={title} onClick={setActiveIndex} activeIndex={activeIndex}/ >)
            }
        </>
    }

然后在您的组件中

const BusinessItem = ({index, activeIndex, title, onClick}) => {
    return (
        <CardContainer 
          className={activeIndex === index ? 'choosen' : 'not-choosen'} 
          onClick={()=> onClick(index)}>
            <Title>{title}</Title>
        </CardContainer>
    )
}

如何使用onClick影响其他元素

2 个答案: