Как повлиять на другой элемент с помощью onClick - PullRequest
Новая
       50

Как повлиять на другой элемент с помощью onClick

0 голосов
/ 30 апреля 2020

Я новичок, чтобы реагировать и получаю проблемы, чтобы достичь чего-то очень простого. У меня есть 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

Ответы [ 2 ]

0 голосов
/ 30 апреля 2020

Вы можете поднять свое состояние, чтобы отслеживать активный элемент, на который нажали 

  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>
    )
}
0 голосов
/ 30 апреля 2020

Вы хотите поднять состояние . Кнопки не являются независимыми друг от друга; все они должны контролироваться родительским компонентом. Что-то вроде: 

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>
        )
    }
}
...