Reactjs 使用react state为单个按钮创建onClick效果时出现问题

所以我对反应和web开发一般来说都是新手（刚从训练营出来），所以我的问题可能会显得很愚蠢。在使用React state单击按钮后，我对其样式设置有问题

在我点击其中一个之后，所有这些都会立即更新，之后我的头就一直撞在墙上

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>

类基础扩展组件{
状态={
单击：false
}
handleClickFunds=（）=>{
这是我的国家({
点击：对
})
}
handleClickOrgs=（）=>{
this.setState（prevState=>({
单击：！prevState.clicked
}));
}
handleClickLocals=（）=>{
这是我的国家({
点击：对
});
}
render（）{
const Button=styled.Button`
背景：白色；
大纲：无；
外观：无；
边界：无；
宽度：150px；
填充：10px；
利润率：0.10px；
字号：1em；
边框：${props=>props.clicked？'1px纯黑'：'none'}；
边界半径：3px；
`;
返回(
基金会
组织共同体
洛卡尼姆·兹比奥科姆

---

我需要在单击时设置它们的样式，并从以前单击的按钮中删除样式。有什么建议吗？请提前感谢。

您正在使用相同的状态变量来判断按钮是否已被单击。因此，当您单击其中一个按钮时，其他按钮正在收听相同的

单击的状态变量

尝试为每个变量使用不同的状态变量，如下所示：

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>

状态={
资金来源：错，
orgsClicked:错，
localsClicked:false，
}
... 
基金会
组织共同体
洛卡尼姆·兹比奥科姆

然后，确保在单击处理程序中更新正确的状态变量。
您正在使用相同的状态变量来判断按钮是否已被单击。因此，当您单击其中一个按钮时，其他按钮正在侦听相同的
单击的状态变量

尝试为每个变量使用不同的状态变量，如下所示：

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>

状态={
资金来源：错，
orgsClicked:错，
localsClicked:false，
}
... 
基金会
组织共同体
洛卡尼姆·兹比奥科姆

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