仅将单个元素推入数组

Question

我有一个组件，您可以通过单击打开/关闭它：

clickHandler = () => {

    this.setState({active: !this.state.active})

    this.props.getSelection(this.state.active)

}

render() {

    const { key, children } = this.props;

    return (

        <button

            key={key}

            style={{...style.box, background: this.state.active ? 'green' : ''}}

            onClick={() => this.clickHandler()}

        >

            {children}

        </button>

    );

}

在父组件中，我传递了一个方法，以尝试获取推入数组中的所选元素的值，如下所示：

getSelection = (val) => {

    const arr = []

    arr.push(val);

    console.log(arr, 'arr');

}

我的问题是，它只会向数组添加一个元素，因此数组长度始终为1（即使单击了多个项目）。

当前结果（单击全部三个后）

console.log(arr, 'arr') // ["Birthday"] "arr"

预期的结果（单击所有三个按钮之后）

console.log(arr, 'arr') // ["Birthday", "Christmas", "School achievement"] "arr"

有任何想法吗？