反应：如果 1 state 为真，则将其他更改为假

Question

I have 4 buttons, for each of which I applied the following functions:

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

    }

I have no problems with the functionality. The main problem is size. For example, now I need to add 2 more buttons, again copying and pasting all these states.

Is there a more elegant way to solve this problem? Thanks

Answer 1

How about creating a generic function that can receive the key that you want to toggle. Create a state copy. Iterate all keys and set them to false. Set the key in question to toggle state.

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

Usage

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

Answer 2

Maybe you can create function what will create object with false values

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

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

But i do not know you logic, maybe it will not work

According to comment above we can use type param