为什么我的 React 应用程序中的两个点击事件会同时运行？答案

【问题标题】：Why do my two click events in my React app run at the same time?为什么我的 React 应用程序中的两个点击事件会同时运行？
【发布时间】：2021-12-03 03:51:17
【问题描述】：

我有两个用户设置选项。一个是“启用级联面板”，另一个是“包含附件”。

我已经设置了状态变量和切换函数来传递给子组件，这样当我点击其中任何一个时，父组件就能够在值之间切换。问题是，当我单击其中一个时，另一个也会执行。我是否错过了设置这些步骤？

父组件数据：

状态：

    constructor(props){
     const userToggleSettings = {
       cascadingPanels: true,
       includeAttachments: true,
       analyticsOptIn: false
     };
    
     this.state = {
       userToggleSettings
     };
    }

切换功能：


toggleIncludeAttachments = () => {
    this.setState((prevState) => (
        {
            userToggleSettings:
            {
                includeAttachments: !prevState.userToggleSettings.includeAttachments
            }
        }
    ));
};

toggleCascadingPanels = () => {
    this.setState((prevState) => (
        {
            userToggleSettings:
            {
                cascadingPanels: !prevState.userToggleSettings.cascadingPanels
            }
        }
    ));
};

includeAttachmentsClickHandler = () => {
    this.toggleIncludeAttachments();
}

cascadingPanelsClickHandler = () => {
    this.toggleCascadingPanels();
}

将值和函数作为道具传递：

<ChildComponent
  attachmentsSwitchHandler={this.toggleIncludeAttachments}
  attachmentsSwitchValue={this.state.userToggleSettings.includeAttachments}
  cascadingPanelsSwitchHandler={this.toggleCascadingPanels}
  cascadingPanelsSwitchValue={this.state.userToggleSettings.cascadingPanels}
/>

子组件数据

在子组件中设置点击事件和值：

<div className='child-component-container'>
    <div className={'user-settings-toggle'}
        onClick={props.cascadingPanelsSwitchHandler}
    >
    <div className={'user-settings-label'}>
            {props.translations.CASCADING_PANELS}
        </div>
    <Switch
        checked={props.cascadingPanelsSwitchValue}
        translations={{
            off: props.translations.off,
            on: props.translations.ON
        }}
        />
    </div>
    <div className={'user-settings-toggle'}
      onClick={props.attachmentsSwitchHandler}
    >
    <Switch
        checked={props.attachmentsSwitchValue}
        translations={{
            off: props.translations.off,
            on: props.translations.ON
        }}
    />
    <div className={'user-settings-label'}>
        {props.translations.ALWAYS_INCLUDE_ATTACHMENTS}
    </div>
</div>

演示：

有人可以澄清我在这里做错了什么吗？

【问题讨论】：

标签： javascript reactjs state jsx react-props

【解决方案1】：

你应该这样改变你的切换功能：

 this.setState((prevState) => (
        {
            userToggleSettings:
            {
                ...prevState.userToggleSettings, // ---> added
                cascadingPanels: !prevState.userToggleSettings.cascadingPanels
            }
        }
    ));

React 不执行“深度合并”，即嵌套对象不合并。仅合并顶级属性。

因此，在执行setState 之后，您会丢失userToggleSettings 对象中的所有内容。

【讨论】：