Question

我有4个按钮，每个按钮都应用了以下功能：

    handleStip() {
        this.setState({isStipOpen: !this.state.isStipOpen, isBookmarkOpen: false, isDonateOpen: false});
    }

    handleBookmark() {
        this.setState({isBookmarkOpen: !this.state.isBookmarkOpen, isStipOpen: false, isDonateOpen: false});
    }

   handleDonate(){
        this.setState({isDonateOpen: !this.state.isDonateOpen, isStipOpen: false, isBookmarkOpen: false});

    }

我在功能上没有问题。主要问题是尺寸。例如，现在我需要再添加2个按钮，再次复制并粘贴所有这些状态。

是否有更优雅的方法来解决此问题？谢谢

Answer 1

如何创建可以接收要切换的键的通用函数。创建状态副本。迭代所有键并将它们设置为false。将有问题的键设置为切换状态。

handleButtonStateChange = (toggleKey) => {
    const stateCopy = {...this.state};
    const nextValue = !stateCopy[toggleKey];
    Object.keys(stateCopy).forEach(key => stateCopy[key] = false);
    stateCopy[toggleKey] = nextValue;
    this.setState(stateCopy);
}

用法

onChange={() => this.handleButtonStateChange('isBookmarkOpen')}

Answer 2

也许您可以创建函数来创建具有错误值的对象

const prepareData = () => ({
isStipOpen: false
isBookmarkOpen: false,
isDonateOpen: false
});

handleEvent(type) {
        this.setState({...this.prepareData(), [type]: !this.state[type]});
    }

但是我不知道您的逻辑，也许这行不通

根据上面的评论，我们可以使用type参数

反应：如果1状态为true，则将其他状态更改为false

2 个答案: