properties in class components

Let's look at a simple class component instance

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>hello_react</title>
  </head>
  <body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="./js/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script type="text/javascript" src="./js/react-dom.development.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="./js/babel.min.js"></script>
    <script type="text/babel">
      // 1、创建类组件
      class MyComponent extends React.Component {
        render() {
          console.log("render中的this", this);
          return <h1>今天天气很热，我想吃冰激凌</h1>;
        }
      }
      // 渲染组件
      ReactDOM.render(<MyComponent />, document.getElementById("test"));
    </script>
  </body>
</html>

It can be seen that the class component inherits several properties of the parent class React.Component, among which props, refs, and state are what we need to study in depth.

Let's take a look at the usage of state

Basic usage of state

   // 1、创建类组件
  class MyComponent extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        isHot: true,
        food: "冰棒",
      };
    }
    render() {
      console.log("render中的this", this);
      return (
        <h1>
          今天天气很{this.state.isHot ? "热" : "冷"}，我想吃{this.state.food}
        </h1>
      );
    }
  }
  // 渲染组件
  ReactDOM.render(<MyComponent />, document.getElementById("test"));

Page effect:

In the above example, we have written the constructor constructor, which is what must be done when using state. The following is the most basic code structure

constructor(props) {
  super(props);
  this.state = {
    //自定义属性
  };
}

Let's not discuss what props are for now. On the state object, we can customize our properties. Let's observe this (component instance)

It can also be found that the attributes I defined exist on the state at this time.

So how do we, like vue, click a button to update the properties in the state? Let's learn briefly about event binding in react.

event binding

native event binding

In react, we can still use the native event binding method, like this

<script type="text/babel">
  // 1、创建类组件
  class MyComponent extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        isHot: true,
        food: "冰棒",
      };
    }
    render() {
      console.log("render中的this", this);
      return (
        <h1 id="title">
          今天天气很{this.state.isHot ? "热" : "冷"}，我想吃{this.state.food}
        </h1>
      );
    }
  }
  // 渲染组件
  ReactDOM.render(<MyComponent />, document.getElementById("test"));
  const title = document.getElementById("title");
  title.addEventListener("click", () => {
    alert("标题被点击了");
  });
</script>

Of course, the following way of writing is also a way of writing native event binding

  title.onclick = function () {
    alert("标题被点击了");
  };

However, since we are all learning react, native writing is definitely not recommended.

Event binding in react

Binding events in react is easy

<script type="text/babel">
  // 1、创建类组件
  class MyComponent extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        isHot: true,
        food: "冰棒",
      };
    }
    render() {
      console.log("render中的this", this);
      return (
        <h1 onClick={tel}>
          今天天气很{this.state.isHot ? "热" : "冷"}，我想吃{this.state.food}
        </h1>
      );
    }
  }
  // 渲染组件
  ReactDOM.render(<MyComponent />, document.getElementById("test"));
  function tel() {
    alert("我被点击了！");
  }
</script>

But beware:

The onClick in JSX is named with camel case, which is inconsistent with the native onclick !
The function in the onClick expression can only write the function name!

If the function and parentheses are written

, then the function executes itself

So, how do we change the value in state through event binding?

Modify the value of state through event binding

A basic code should look like this

<script type="text/babel">
      // 1、创建类组件
      class MyComponent extends React.Component {
        constructor(props) {
          super(props);
          this.state = { isHot: true };
          this.tel = this.tel.bind(this);
        }
        render() {
          return <h1 onClick={this.tel}>今天天气很{this.state.isHot ? "热" : "冷"}，我想吃冰激凌</h1>;
        }
        tel() {
          const isHot = this.state.isHot;
          this.setState({ isHot: !isHot });
        }
      }
      // 渲染组件
      ReactDOM.render(<MyComponent />, document.getElementById("test"));
    </script>

In the above code, we put the tel function in the component class, and changed the this point in the class through this.tel = this.tel.bind(this); and finally updated the isHot value in the state through setState.

To fully understand the meaning of the above code, we need to learn more about the this pointing problem in the react component.

React component instance state-event binding (3)