在 react.js 中克隆后内联事件处理程序不起作用

Question

大家好，我在尝试克隆反应组件（克隆反应组件的父 div）时观察到一个问题，这使得内联事件处理程序以某种方式被禁用/删除，并且无法从克隆的组件中触发任何事件，但原始组件工作正常。据我搜索 javascript cloneNode 方法应该适用于内联事件处理程序，它也适用于普通的 html 和 javascript 但不知何故我似乎无法让它在反应中工作。

index.js

import React from 'react';
import ReactDOM from 'react-dom';

class Football extends React.Component {
  shoot() {
    alert("Great Shot!");
  }
  render() {
    return (
      <button onClick={this.shoot}>Take the shot!</button>
    );
  }
}

ReactDOM.render(<Football />, document.getElementById('root'));

索引.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport"
      content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>

    <div id="root"></div>
     <button "onclick=CloneIt()">CloneIt</button>
<script>
function CloneIt(){
var elem=document.getElementById("mainComp").cloneNode(true);
document.body.appendChild(elem);
}
</script>
  </body>
</html>

Answer 1

React 实际上并没有创建内联事件，即使你是内联编写事件。

JSX 不是实际的 html，它只是被 babel 转换为React.createElement以进行反应的语法糖。

所以你的内联 onClick 事件实际上变成了props.onClick ，这是 props object 的一个属性，作为第二个参数传递给 React.createElement。

内部反应使用addEventListener附加事件侦听器。

当您克隆一个 React 元素并将 append 克隆到 DOM 时，新附加的元素不会有任何指向反应组件的链接。 因此，如果您希望 onClick 事件与原始 DOM 一起工作，则需要使用 react 组件对元素进行水合。

var elem = document.getElementById("root").cloneNode(true);
document.body.appendChild(elem);
ReactDOM.hydrate(<Football />, elem);

在 react.js 中克隆后内联事件处理程序不起作用

问题描述

1 个解决方案

解决方案1
3 已采纳 2019-10-18 06:51:13

在 react.js 中克隆后内联事件处理程序不起作用

问题描述

1 个解决方案

解决方案1 3 已采纳 2019-10-18 06:51:13

解决方案1
3 已采纳 2019-10-18 06:51:13