Question

因此，我通常对React和Web开发还是陌生的（从新手训练营开始），所以我的问题可能会变得很愚蠢。使用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>

我需要在单击时设置样式，然后从以前单击的按钮中删除样式。有什么建议吗？预先谢谢你。

Answer 1

您正在使用相同的状态变量来告诉您的按钮是否已被单击。因此，当您单击其中一个时，其他人正在监听相同的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>

然后，请确保在点击处理程序中更新正确的状态变量。

使用反应状态为单个按钮创建onClick效果的问题

1 个答案: