React - zdarzenie onClick w elemencie div (komponent klasowy)

W tym artykule chcielibyśmy pokazać, jak obsłużyć zdarzenie kliknięcia myszką na element div w Reakcie.

Poniższy przykład używa:

• stanu komponentu do przechowywania wartości color,
• metodę setState() do aktualizacji wartości color,
• własności onClick do obsługi zdarzenia.

Praktyczny przykład:

// ONLINE-RUNNER:browser;

// Uwaga: Odkomentuj poniższe linijki podczas pracy z kompilatorem JSX:
// import React from 'react';
// import ReactDOM from 'react-dom';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      color: 'yellow'
    };
  }
  handleClick = () => {
    this.setState({ color: this.state.color === 'yellow' ? 'orange' : 'yellow' });
  };
  render = () => {
    return (
      <div style={{ background: this.state.color }} onClick={this.handleClick}>
        Kliknij mnie, aby zmienić kolor.
      </div>
    );
  };
}

const root = document.querySelector('#root');
ReactDOM.render(<App />, root);

Uwaga:

Przejdź do tego artykułu, aby zobaczyć wersję z użyciem komponentu funkcyjnego.