React.js xử lý sự kiện (event)

Cách React.js xử lý sự kiện (event) (thật ra là JSX) có khác biệt so với viết HTML thông thường, xem so sánh sau sẽ rõ.

Event viết theo HTML	Event viết theo JSX
<button onclick="fncName()"> Click me! </button>	<button onClick={fncName}> Click me! </button>

Thay đổi bên trên khác biệt ở phần onClick={} thay vì onclick="", (cẩn thận chữ C viết hoa).
Thay đổi khác là ở phần gọi function:
- Khi bạn khai báo fncName() thì function sẽ được gọi khi render.
- Khi bạn khai báo fncName thì function sẽ được gọi khi button được click.

React event với <button>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="member"></div>

    <script type="text/babel">
      const ActionButton = () => {
        const handleClick = () => {
          console.log('Button was clicked!');
        }

        return (
          <button onClick={handleClick}>
            Click me
          </button>
        );
      }

      ReactDOM.render(
        <ActionButton />,
        document.getElementById('member')
      );
    </script>
  </body>
</html>

Trình duyệt hiển thị

Output khi xem console (F12)

Button was clicked!

React event với liên kết <a>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="member"></div>

    <script type="text/babel">
      const ActionLink = () => {
        const handleClick = (e) => {
          e.preventDefault();
          console.log('The link was clicked!');
        };

        return (
          <a href="#" onClick={handleClick}>
            Click me!
          </a>
        );
      };

      ReactDOM.render(
        <ActionLink />,
        document.getElementById('member')
      );
    </script>
  </body>
</html>

Đối với liên kết <a> thì sử dụng return false để ngăn mặc định của click, mà bắt buộc gọi e.preventDefault() trong function.

Trình duyệt hiển thị

Click me!

Output khi xem console (F12)

The link was clicked!

Xem lại xử lý event ở bài Cập nhật một State

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="member"></div>

    <script type="text/babel">
      class Member extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            users: [
              { name: "Bùi Văn Tèo", age: 25 },
              { name: "Trần Văn An", age: 29 },
              { name: "Nguyễn Thị Bưởi", age: 22 }
            ],
            job: "IT Communicator"
          };
        };

        changeName = () => {
          this.setState({
            users: [
              { name: "Bùi Văn Tý", age: 27 },
              { name: "Trần Văn An", age: 29 },
              { name: "Nguyễn Thị Bưởi", age: 22 }
            ],
            job: "Bridge System Engineer"
          })
        }

        render() {
          return (
            <div>
              <h2>{this.state.users[0].name}</h2>
              <p>Tuổi: {this.state.users[0].age}</p>
              <p>Nghề nghiệp: {this.state.job}</p>
              <button type="button" onClick={this.changeName}>Change Data</button>
            </div>
          );
        };
      };

      ReactDOM.render(
        <Member />,
        document.getElementById('member')
      );
    </script>
  </body>
</html>

Hiển thị trình duyệt sau khi đã click vào button

Làm thử!

Component - lifecycle

React.js xử lý form