将事件添加到克隆组件

Question

我正在使用以下方法克隆一个组件并修改其属性。

    const clone = React.cloneElement(<BallComponent>, {
        key: new Date().getTime()
    });

我如何在这个克隆组件上添加点击事件并在其类中调用函数？ 我尝试了以下方法，但没有成功：

    const clone = React.cloneElement(<BallComponent>, {
        key: new Date().getTime()}
        onClick: alert('test');
    });

- Jarolin V

Answer 1

你在props对象的右括号前面加了一个闭合符号。此外，将onClick传递给一个函数，而不是在那里调用alert，这将在组件挂载时立即执行。

const clone = React.cloneElement(<BallComponent>, {
    key: new Date().getTime()
    onClick: () => { alert('test') }
});

这是一个使用 React.cloneElement 的最简示例。

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

class Demo extends React.Component {
  render() {
    return <p onClick={this.props.click}>This is Demo. Click me.</p>;
  }
}

function App() {
  const clone = React.cloneElement(<Demo />, {
    click: () => {
      alert("You clicked Demo :)");
    }
  });

  return (
    <div className="App">
      {clone}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

- Hemant Parashar

Answer 2

使用下面的代码片段，它会正常工作。

var Clone = React.cloneElement(<BallComponent/>, {
      key: new Date().getTime(),
      onClick: () => { alert('test') }
    });

P.S. - 确保 BallComponent 具有 onClick，否则警告将不会触发。

- D Mishra

Answer 3

在这个例子中，你正在执行alert('test')并将其返回值赋给onChange，在这种情况下是undefined。

你需要的是传递一个函数：

 const clone = React.cloneElement(<BallComponent>, {
        key: new Date().getTime()}
        onClick: () => { alert('test') };
    });

- Diego Lara