react学习笔记3--数据双向绑定，组件通信

一、表单处理

 

1、受控组件-input元素

通过设置input元素的value值（或复选框的checked值）实现Getter，通过监听onChange事件实现Setter，从而实现数据双向绑定。

class element extends React.Component {
    state = {
        txt:"",
        checked:false
    }
    handleTxt = (e) => {
        this.setState({txt : e.target.value})
    }
    handleChecked = e => {
        this.setState({checked : e.target.checked})
    }
    render(){
        return (
            <input type='text' value={this.state.txt} onChange={this.handleTxt}>
            <input type='checkbox' checked={this.state.checked} onChange={this.handleChecked}>
        )
    }
}

多表单的优化操作：

1）给input元素加name,name=state中对应的数据名、2）统一用一个处理函数处理数据变化，函数内用e.target.name获取应该修改的状态名

class element extends React.Component {
    state = {
        txt:"",
        checked:false
    }
    handleForm = (e) => {
        let name = e.target.name
        let value = e.target.value||e.target.checked
        this.setState({[name] : value}) //!!这里要用[],否则会当作"name"字符串处理
    }
    render(){
        return (
            <input type='text' value={this.state.txt} onChange={this.handleForm}>
            <input type='checkbox' checked={this.state.checked} onChange={this.handleForm}>
        )
    }
}

2、非受控组件

二、组件通信

1、props:一个对象

import React from 'react'
import ReactDom from 'react-dom'

//函数式：porps形参
function Element1 (props){
    return (
        <p>{props.name}+{props.age}</p>
    )
}

//类式：this.props
class Element2 extends React.Component{
    render(){
        return (
            <p>{this.props.name}+{this.props.age}</p>
        )
    }
}

ReactDom.render(<Element1 name='bob' age={18}/>)
ReactDom.render(<Element2 name='bob' age={18}/>)

注：1)props可以传递任意数据类型，包括数组、对象、函数、dom结构等。2）props只读。3）在类中如果定义了constructor(props)则必须将props传入做形参，且需要在super(props)函数也传入props形参

组件间通信方式：

1）父传子：props传数据,如上

2）子传父：props传函数，通过回调函数传参方式

3）兄弟组件通信：状态提升，将共享状态的定义提升到公共父组件

2、context 跨级组件通信，祖先元素将数据传递给后代元素时使用

假设 祖先 > subComponent > 后代

1）创建两个内置组件Provider、Comsumer

const {Provider,Consumer} = React.createContext()

2)祖先元素中用Provider包裹返回值

//祖先
render(){
    return (
        <Provider value='xiaoming'>
            <div><subComponent></subComponent><div>
        </provider>
    )
}

3)后代元素用Consumer {}包裹

render(){
    return(
        <div>
            <Consumer>{ data => <p>名字是：{data}<p> }</Consumer>
        </div>
    )
}

三、props深入

1、props的children属性

当渲染组件时，组件中嵌套的内容视为children属性，可以通过props.children访问到。

嵌套的内容可以是文本、标签、组件、jsx语句、函数等

const App = (props)=>{
    props.children() //函数执行
    return (
        <div>{props.children}</div>
    )
}

// ReactDom.render(<App>这是一段文本</App>)
// ReactDom.render(<App><p>这是一个p标签</p></App>)
// ReactDom.render(<App><Children>这是一个子组件</Children></App>)
// ReactDom.render(<App>{()=>console.log("这是一个函数")}</App>)

2、props校验，需要安装 prop-types包

常用的校验规则：

 3、props默认值