Проблема с созданием эффекта onClick для отдельных кнопок, использующих состояние реакции - PullRequest
Новая
       23

Проблема с созданием эффекта onClick для отдельных кнопок, использующих состояние реакции

0 голосов
/ 05 июня 2019

Так что я довольно новичок в React и веб-разработке в целом (только что из буткемпа), поэтому мои вопросы могут показаться довольно глупыми. У меня проблема со стилем кнопок после нажатия на них с использованием состояния React.

Все они обновляются сразу после того, как я нажму на одну из них, и после этого я бью головой о стену. 

class Foundations extends Component {

state = {
    clicked: false
}

handleClickFunds = () => {
    this.setState({
        clicked: true
    })
}

handleClickOrgs = () => {
    this.setState(prevState => ({
        clicked: !prevState.clicked
    }));
}

handleClickLocals = () => {
    this.setState({
        clicked: true
    });
}

render() {

    const Button = styled.button`
        background: white;
        outline: none;
        appearance: none;
        border: none;
        width: 150px;
        padding: 10px;
        margin: 0 10px;
        font-size: 1em;
        border: ${props => props.clicked ? '1px solid black' : 'none'};
        border-radius: 3px;
    `;

 return (
                <Buttons>
                    <Button clicked={this.state.clicked} onClick={this.handleClickFunds}>Fundacjom</Button>
                    <Button clicked={this.state.clicked} onClick={this.handleClickOrgs}>Organizacjom</Button>
                    <Button clicked={this.state.clicked} onClick={this.handleClickLocals}>Lokalnym zbiórkom</Button>
                </Buttons>

Мне нужно стилизовать их при нажатии и удалить стили из ранее нажатых кнопок. Любой совет? Заранее спасибо.

1 Ответ

2 голосов
/ 05 июня 2019

Вы используете одну и ту же переменную состояния, чтобы определить, были ли нажаты ваши кнопки или нет.Поэтому, когда вы щелкаете по одному из них, остальные слушают одну и ту же переменную состояния clicked.

Попробуйте использовать разные переменные состояния для каждого, например: 

state = {
    fundsClicked: false,
    orgsClicked: false,
    localsClicked: false,
}

... 

<Button clicked={this.state.fundsClicked} onClick={this.handleClickFunds}>Fundacjom</Button>
<Button clicked={this.state.orgsClicked} onClick={this.handleClickOrgs}>Organizacjom</Button>
<Button clicked={this.state.localsClicked} onClick={this.handleClickLocals}>Lokalnym zbiórkom</Button>

Затем обязательно обновите правильную переменную состояния в ваших обработчиках кликов.

...