如何使用 onClick 影响其他元素

Question

我是新手，在实现一些非常简单的事情时遇到了麻烦。我有 3 个盒子，初始颜色为黑色，

我需要每当用户点击其中一个框时，如果第一个框改变颜色然后我们点击第二个，则只有所选框的颜色会变为白色而其他元素保持初始颜色框，所以第一个框 return 为初始颜色，第二个变为白色。

这是我目前所做的：

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;

我正在尝试创建此屏幕：

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 <>
            {
                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 影响其他元素

How to effect other element with onClick

javascript

dom-events

reactjs