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

Posted 2023-02-22

【中文标题】为啥我的 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>

演示：

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

【参考方案1】：

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

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

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

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