Languages
[Edit]
PL

React - zdarzenie onClick w elemencie div (komponent klasowy)

0 points
Created by:
Dirask JS Member
3430

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. 

ReactJS (PL)

React - zdarzenie onClick w elemencie div (komponent klasowy)
Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join