一般是通过 bind 函数绑定 this,来传递参数的,没有参数就是下面这种方式或者直接写函数名
代码如下:
//被触发函数写法: const onChange = (e) => { //操作 } onChange={onChange} or onChange={onChange.bind(this)}
有参调用,代码如下:
//被触发函数写法: const onChange = (index, e) => { //操作 }
传值调用:
onChange={onChange.bind(this, 0)}
onClick 传参方式同上,就不在此赘述了。
到此 React onClick/onChange 传参 (bind绑定)介绍完成。
方便js中书写html模板,javascript与html混合写法
函数组件
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
函数组件和类组件区别
1.函数组件通常展示
类组件通常做为容器
2.类组件可以有state,管理数据用类组件
函组件没有state
3.函组件没有this
类组件 有this
4.函数组件没有生命周期
类组件有生命周期
文本
// 普通文本 <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
在App.js导入组件
import Steper from './components/Steper'
在App.js render函数中使用
<Steper></Steper>
组件传参
父传子 props
// 父组件传递 <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节点
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。