React menganggap komponen sebagai mesin keadaan. Dengan berinteraksi dengan pengguna, keadaan berbeza dicapai, dan kemudian UI diberikan untuk memastikan antara muka pengguna dan data konsisten.

Keadaan Bertindakbalas(keadaan) sintaks

Dalam React, anda hanya perlu mengemas kini keadaan komponen, dan kemudian memaparkan semula antara muka pengguna berdasarkan keadaan baharu (tanpa memanipulasi DOM).

Komponen LikeButton dicipta dalam contoh berikut Kaedah getInitialState digunakan untuk menentukan keadaan awal, iaitu objek ini boleh dibaca melalui sifat this.state. Apabila pengguna mengklik pada komponen, menyebabkan keadaan berubah, kaedah this.setState mengubah nilai keadaan Selepas setiap pengubahsuaian, kaedah this.render dipanggil secara automatik untuk memaparkan komponen semula.

Keadaan Bertindakbalas(keadaan) contoh

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>php.cn React 实例</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
	<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
	<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      var LikeButton = React.createClass({
        getInitialState: function() {
          return {liked: false};
        },
        handleClick: function(event) {
          this.setState({liked: !this.state.liked});
        },
        render: function() {
          var text = this.state.liked ? '喜欢' : '不喜欢';
          return (
            <p onClick={this.handleClick}>
              你<b>{text}</b>我。点我切换状态。
            </p>
          );
        }
      });

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

Run Instance »

Klik butang "Run Instance" untuk melihat instance dalam talian