标签：第三节 标签 绑定 react state num jsx 梳理 setState

jsx中绑定this

为什么this会是undefined ？

1. 可以使用bind方式绑定this

<button onClick={this.sayHi.bind(this)}>{this.state.btnDes}</button>

2. 可以使用箭头函数方式绑定this

<button onClick={() => this.sayHi()}>{this.state.btnDes2}</button>

jsx中的列表渲染

一般的，都是使用map进行列表渲染，同时返回一个jsx-dom

    <ul>
          {/* 在这里，一般用map来进行列表渲染 */}
          {
            this.state.movies.map((item, index) => <li onClick={() => this.getItme(item)} key={index}>{item}</li>)
          }
    </ul>

计数器案例

1. setState的函数形式：

传递一个函数可以让你在函数内访问到当前的 state 的值。因为 setState 的调用是分批的，所以你可以链式地进行更新，并确保它们是一个建立在另一个之上的，这样才不会发生冲突

 this.setState((pre, next) => {
      console.log(pre, next);
      return {
        val: data
      }
    })

几点提示

pre : state更改前的上一次状态
next : state更改后的状态
函数式必须要return一个对象，分别对应state内的键值对

2. 绑定属性

绑定属性类似原生小程序，如
<input onChange={(e) => { this.changeVal(e) }} value={this.state.val ? this.state.val : 0} />

3. react并没有双向绑定，因而要使用e事件对象来找到值

4. 关于num++ 与num+1
   要使用num+1

在使用setState的时候不能使用num++，否则会导致修改失败 ，并且在事件触发时state也只会保持原值

JSX语法

描述:jsx是js的拓展语法，想要使用jsx ，需要给script标签中添加 type="text/babel"属性

1. jsx规范
2. jsx顶部只允许有一个根元素，即便是空标签也可以
3. jsx外层包裹一个小括号，一来方便阅读，二来可以换行书写
   3.jsx中的标签可以是单标签，也可以是双标签，但如果是单标签，需要/>结尾，如<img />, <div />
4. jsx注释

通常使用{/* 这里是注释 */}来表示，在jsx上下文环境下，ctrl+/可以自动生成注释行

3. jsx嵌入变量

标签：第三节,标签,绑定,react,state,num,jsx,梳理,setState
来源： https://www.cnblogs.com/hjk1124/p/14917003.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。