ReactonClick/onChange传参(bind绑定)问题

//被触发函数写法：
const onChange = (e) => {
    //操作
}
 
onChange={onChange}
or
onChange={onChange.bind(this)}

//被触发函数写法：
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文本内容}></div>

{flag&&<h1>为true显示</h1>}
{flag?'true显示':'false显示'}

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

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

// 事件总是要响应一个函数
<h1 oncClick={()=>{ alert("abc")}}>

// 事件响应 箭头函数
doit = ()=>{ alert("你好")}

// 事件响应定义好的函数
<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
}

// 父组件 
// 定义函数并把函数传递给子组件
updateSize = (n)=>this.setState({size:n})  // 定义函数
<Steper updateSize={this.updateSize}>      // 传递给子组件

// 子组件
// 执行
props.updateSize()   // 相当于执行父组件的updateSize方法

// 1. 导入创建dom 引用的方法
import {createRef} from 'react'
// 2. 创建dom引用
var inp = createRef()
// 3. 引用
<input ref={inp}>
// 4. 获取值
inp.current.value
inp.current 当前引用的dom节点