Добавить события к клонированному компоненту - PullRequest
Новая
       15

Добавить события к клонированному компоненту

0 голосов
/ 05 марта 2019

Я использую следующий метод для клонирования компонента и изменения его свойств. 

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

Как я могу добавить событие click к этому клонированному компоненту и вызывать функцию в своем классе при нажатии?Я попробовал следующее без удачи: 

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

Ответы [ 3 ]

1 голос
/ 05 марта 2019

Вы закрываете подпорки фигурной скобкой раньше. Кроме того, передайте onClick функцию вместо вызова там предупреждения, которое будет выполняться сразу после монтирования компонента. 

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);
0 голосов
/ 05 марта 2019

Используйте фрагмент кода ниже, и он будет работать. 

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

P.S.-Убедитесь, что у BallComponent есть onClick, если предупреждение не сработает.

0 голосов
/ 05 марта 2019

В этом примере вы выполняете alert('test') и присваиваете его возвращаемое значение onChange, в этом случае undefined.

Вам нужно передать функцию: 

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