Bài 12: React.js setState

React.js setState

  • Bài trước ta đã biết cách viết một State là như thế nào, bài này sẽ giúp các bạn cách cập nhật dữ liệu của component bằng các sử dụng setState.

Thay đổi dữ liệu bên trong component với State

  • Muốn thay đổi hay cập nhật nội dung của một State, chúng ta sử dụng this.setState, khi này dữ liệu thay đổi sẽ được cập nhật tới State hiện tại.
  • Để hiểu rõ hơn về this.setState, chúng ta xem ví dụ sau:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React</title>
    <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
    <script src="https://unpkg.com/[email protected]/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 = {
            name: "Bùi Văn Tèo",
            age: 25
          };
        };

        changeName = () => {
          this.setState({
            name: "Bùi Văn Tý",
            age: 27
          })
        };

        render() {
          return (
            <div>
              <strong>{this.state.name}</strong>
              <p>Tuổi: {this.state.age}</p>
              <button type="button" onClick={this.changeName}>Change name</button>
            </div>
          );
        };
      };

      ReactDOM.render(
        <Member />,
        document.getElementById('member')
      );
    </script>
  </body>
</html>
  • Nội dung trên ta đã dùng this.setState để thay đổi name của State.
  • Khi click vào button sẽ gọi function changeName, khi này this.setState sẽ cập nhật lại dữ liệu mới cho State.

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

React State

Xem thêm ví dụ về setState

  • Ta sẽ thử sử dụng setState với dữ liệu Object nhiều phần tử để biết thêm nhiều trường hợp khác nhau:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React</title>
    <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
    <script src="https://unpkg.com/[email protected]/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>
              <strong>{this.state.users[0].name}</strong>
              <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

React State
Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *