Reactjs学习-State

本篇是关于React的基础-State

  • 在哪儿定义
    1.  类组件
    react在Constructor函数中定义state, 如下


    2. 函数组件
    使用useState定义, 参考官网

    const [state, setState] = useState(initialState);
  • 如何绑定使用
    JSX语法中, 想使用刚才定义的state, 需要用花括号包起来

    例如



  • 如何修改state

    1. 类组件
    需要绑定事件, React提供setState函数来做这个操作

    this.setState({state名 : 值 })
    注意: 用花括号包起来

    this.setState(prevState => {
    //接受一个函数,参数是更新之前的state
      return {age: prevState.age + 1};
    });

    例如


    你要注意这里有个this指向问题, 所以需要调用bind方法让this指向当前组件,如下(  推荐是放在constructor 函数中 )

    这样就可以使用了

    注意: React中的事件都是驼峰命名, 例如onclick 要写成 onClick

    2. 函数组件中  官网案例
    在useState中,第二个参数就是这个方法,一般以set开头,例如 `setPostContent`   然后绑定到你的事件上就可以使用了。



 

 

 

posted @ 2023-07-18 17:04  芋圆小宝  阅读(47)  评论(0)    收藏  举报