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

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

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

索引.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>

<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>

牛魔王的故事

浏览 178回答 1

1回答

ibeautiful

React 实际上并没有创建内联事件，即使您内联编写事件也是如此。JSX 并不是真正的 html，它只是React.createElement被 babel转换为 react 的语法糖。所以你的内联 onClick 事件实际上变成props.onClick了 props 对象的一个属性，作为第二个参数传递给 React.createElement。内部反应使用addEventListener.当您克隆一个 React 元素并将其附加到 DOM 时，新附加的元素将不会有任何指向 React 组件的链接。所以，如果你想让 onClick 事件像处理原始 DOM 一样工作，你需要用 react 组件来填充元素。var elem = document.getElementById("root").cloneNode(true);document.body.appendChild(elem);ReactDOM.hydrate(<Football />, elem);

0

0

随时随地看视频慕课网APP

相关分类

JavaScript