如何使用onClick影响其他元素-react.js

Question

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

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

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

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

class BussinesItem 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 BussinesItem;

我正在尝试创建以下屏幕：app_screens在此先感谢！

Answer 1

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

class Select extends React.Component {
    constructor(props) {
        super(props);
        this.state = { selected: null };
    }
    render(){
        return (
            <div>
                <Button
                    selected={this.state.selected === "Dog"}
                    onClick={() => this.setState({selected: "Dog"})}
                >Dog</Button>
                <Button
                    selected={this.state.selected === "Cat"}
                    onClick={() => this.setState({selected: "Cat"})}
                >Cat</Button>
            </div>
        )
    }
}

class Button extends React.Component {
    render(){
        const className = this.props.selected ? "selected" : "";
        return (
            <button
                className={className}
                onClick={this.props.onClick}
            >{this.props.children}</button>
        )
    }
}

Answer 2

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

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

        return <>
            {
                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>
    )
}