时间戳

首页 > 解决方案 > 在 react.js 中克隆后内联事件处理程序不起作用

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

问题描述

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

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>

标签： javascripthtmlreactjs

解决方案

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

JSX 不是真正的 html，它只是React.createElement被 babel 转换为 react 的语法糖。

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

内部反应使用addEventListener.

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

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

推荐阅读