//被觸發(fā)函數(shù)寫法：
const onChange = (e) => {
? ? //操作
}
?
onChange={onChange}
or
onChange={onChange.bind(this)}

//被觸發(fā)函數(shù)寫法：
const onChange = (index, e) => {
????//操作
}

onChange={onChange.bind(this, 0)}

function App(){
    return <div> ... </div>
}
export default App;

import React,{Componet} from 'react'

class App extends Componet {
    constructor(props){
        super(props)
    }
    state = {num:5}
   render(){
      return <div></div>
   }
}
export default App

// 普通文本
 <h1 className="active">你好react</h1>
// html文本
 <div dangerouslySetInnerHTML={_html:html文本內(nèi)容}></div>

{flag&&<h1>為true顯示</h1>}
{flag?'true顯示':'false顯示'}

{list.map(item=><h3 key={item}>{item}</h3>)}

// 和原生js事件一致 事件命名用駝峰式
onclick   // 原生
onClick   // react
onmouseover  // 原生
onMouseover  // react

// 事件總是要響應(yīng)一個函數(shù)
<h1 oncClick={()=>{ alert("abc")}}>

// 事件響應(yīng) 箭頭函數(shù)
doit = ()=>{ alert("你好")}

// 事件響應(yīng)定義好的函數(shù)
<h1 onClick={this.doit}>

changeMsg=e=>this.setState({msg:e.target.value})
<input  value={this.state.msg} onChange={this.changeMsg}>

src/components/Steper.js

import Steper from './components/Steper'

<Steper></Steper>

// 父組件傳遞
<Steper  num={5}>

// 子組件接收
props.num

Steper.defaultProps = {
    num:1
}

// 父組件 
// 定義函數(shù)并把函數(shù)傳遞給子組件
updateSize = (n)=>this.setState({size:n})  // 定義函數(shù)
<Steper updateSize={this.updateSize}>      // 傳遞給子組件

// 子組件
// 執(zhí)行
props.updateSize()   // 相當(dāng)于執(zhí)行父組件的updateSize方法

// 1. 導(dǎo)入創(chuàng)建dom 引用的方法
import {createRef} from 'react'
// 2. 創(chuàng)建dom引用
var inp = createRef()
// 3. 引用
<input ref={inp}>
// 4. 獲取值
inp.current.value
inp.current 當(dāng)前引用的dom節(jié)點