ReactJS 中的合成事件是什么？

为了作为跨浏览器应用程序工作，React 创建了一个与本机浏览器相同的包装器，以避免为多个浏览器创建多个方法的多个实现，为跨浏览器的所有事件创建通用名称。另一个好处是它提高了应用程序的性能，因为 React 重用了事件对象。

它汇集了已经完成的事件，从而提高了性能。

句法：

• e.preventDefault() 阻止浏览器的所有默认行为。

e.preventDefault()

• 每当调用子组件时，e.stopPropagation() 都会阻止对父组件的调用。

e.stopPropagation()

注意：这里的'e'是一个合成事件，一个跨浏览器的对象。它是由浏览器实际事件的包装器制成的。

一些属性是：

• bubbles：返回 true 或 false 表示事件是否为冒泡事件。
• cancelable：返回 true 或 false 表示事件是否可以取消。
• currentTarget：指示处理程序附加到的元素
• defaultPrevented：返回true或false，表示事件是否被preventDefault()取消。
• eventPhase：返回数字，表示阶段
• isTrusted：当事件由用户生成时返回 true，当由浏览器/脚本生成时返回 false
• type：返回字符串，表示事件的类型

注意：进一步讨论诸如 preventDefault() 和 stopPropagation() 之类的方法。

创建反应应用程序：

步骤1：创建react项目文件夹，打开终端，如果你已经全局安装了create-react-app，输入命令npm create-react-app文件夹名称。如果您还没有使用命令 npm -g create-react-app 全局安装 create-react-app ，或者可以通过npm i create-react-app在本地安装。

npm create-react-app project

第2步：创建项目文件夹（即项目）后，使用以下命令移动到该文件夹。

cd project

项目结构：

示例 1：在 App.js 中，我们正在创建一个简单的按钮，单击该按钮会在控制台中显示事件的所有属性。我们将在控制台中看到所有上述属性。

App.js

function App() {
    const onClickHandler = (e) => {
        console.log(e);
    }
    return (
        

            
                Click
            
        
    );
}
  
export default App;

输出：

现在我们将了解两个 void 函数：preventDefault()、stopPropagation()、

注意：目前 e.persist() 没有做任何事情，因为它不再被汇集。

我们将创建一个带有输入标签和一些按钮的表单组件，因为我们知道默认情况下提交按钮会刷新页面并且输入将再次为空，但我们可以通过使用方法preventDefault()来防止默认行为，所以在这里，我们创建了一个函数名称为 handlepreventDefault ，它将事件作为 e 并停止提交按钮的默认行为。

为了理解我们已经采用了两个名为 stopPropagation() 的嵌套跨度和嵌套在跨度 stopPropagation() 内部的 div，根据浏览器的默认行为，当我们单击内部 div 时，也会触发父类的方法为了防止我们在子跨度中使用stopPropagation() ，这样当点击它时，它只会触发与子跨度关联的方法。这里创建了两个函数 handlestopPropagation 和 insideDiv ，当它们各自的 span 被点击时触发。

示例 2：

应用程序.js

function App() {
    const handlepreventDefault = e => {
        e.preventDefault();
        console.log("clicked on preventDefault")
    }
    const handlestopPropagation = e => {
        e.stopPropagation();
        console.log("clicked on stopPropagation")
    }
  
    const insideDiv = (e) => {
        e.stopPropagation();
        console.log("clicked on Div")
    }
    return (
        

            

                Type anything: 
                
                    preventDefault()
                
                
                    stopPropagation()
                     Inside div
                
                submit
  
            
        
    );
}
  
export default App;

index.js

body {
    margin: 0;
    font - family: -apple - system, BlinkMacSystemFont, 
    'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
    'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans - serif;
    -webkit - font - smoothing: antialiased;
    -moz - osx - font - smoothing: grayscale;
}
    
  code {
    font - family: source - code - pro, Menlo, Monaco, 
    Consolas, 'Courier New', monospace;
}
button, span{
    padding: 2px 10px;
    font - size: 20px;
    border: 1px solid black;
    background - color: aliceblue;
    cursor: pointer;
}

输出：