react学习系列（二）

JSX 语法练习

在jsx语法中，需要书写js代码的时候，请先加上{ } 再书写js语法

import React, { Component } from 'react'

let name = "小明", num1=20, num2=30, arr=[1, 2, 3, 4, 5]

export default class App extends Component {
  render() {
    return (
      <div>
        {/* 这是注释的格式 */}
        {/* JSX中引用变量需要加单花括号 */}
        <p>{name}</p>

        {/* 三目运算符的使用 */}
        <p>num1和num2中比较大的是：{num1>num2? num1: num2}</p>
        {/* for循环的使用 */}
        <ul>
          {/* 数组名.map(函数) */}
          {
            //格式1：
            arr.map((v,k)=>(
              <li key={k}>{v}</li>
            ))
          }
        </ul>
      </div>
    )
  }
}

双向数据绑定

React中没有类似vue的 v-model 指令，因此要实现双向数据绑定，只能操作 value 和 onChange(或onInput)事件

import React, { Component } from 'react'

// 双向数据绑定

export default class App extends Component {
    state = {
        msg: "你好世界"
    }
    render() {
        return (
            <div>
                <input type="text" value={this.state.msg} onChange={(e)=>this.changeFn(e)} />
                <h2>{this.state.msg}</h2>
            </div>
        )
    }
    // input的输入事件
    changeFn(e){
        this.setState({
            msg: e.currentTarget.value
        })
    }
}