重温react-03

react组件通讯

父子组件之间通信

父组件

// 父向子组件传参

// import React, { Component } from 'react'
// import ChildrenElement from './sonJsx'
// export default class fatherJsx extends Component {
//     state={
//         age:18
//     }
//     render() {
//         return (
//             <div>
//                 <div>我是父组件</div>
//                 <ChildrenElement name="张三" />
//                 <ChildrenElement age={this.state.age} />
//             </div>
//         )
//     }
// }


// 子向父亲传值
import React, { Component } from 'react'
import ChildrenElement from './sonJsx'
export default class fatherJsx extends Component {
    getChildrenData=(data)=>{
        console.log(data)
        alert(data)
    }
  render() {
    return (
      <div>我是父组件
        <ChildrenElement getChildrenData={(params)=>this.getChildrenData(params)}  />
      </div>
    )
  }
}

子组件

// 父向子传参
// import React, { Component } from 'react'

// export default class sonJsx extends Component {
//   render() {
//     return (
//       <div>子组件
//         {this.props.name}
//         {this.props.age}
//       </div>
//     )
//   }
// }


// 子向父传参
import React, { Component } from 'react'
export default class sonJsx extends Component {
    setMessageToFather(){
        console.log( this.props,' this.props');
        this.props.getChildrenData('123456')
    }

  render() {
    return (
      <div style={{color:'red'}}>点击我向父组件传值
      <button onClick={()=>this.setMessageToFather()}>点击一下</button>
      </div>
      
    )
  }
}

受控组件

import React, { Component } from 'react'
//  受控组件 , 需要 填写控制onchange事件的方法来修改这个状态的值 
//  例如 input textarea 
/*
    1、可以通过初始state中设置表单的默认值 
    2、每当表单的值发生变化时，调用onChange事件处理器 
    3、事件处理器通过事件对象event拿到改变后的状态，并更新组件的state 
    4、一旦通过setState方法更新state，就会触发视图的重新渲染，完成表单组件的更新
*/
export default class inputValueChange extends Component {
    state = {
        values: 1111,
        list: [
            {
                aa: [
                    1,
                ]
            },
            {
                aa: [
                    1,
                    1,
                ]
            }
        ]
    }
    changeArr() {
        // 将list改变成 list:[{id:1,value:1},{id:2,value:2},{id:3,value:3}]  
         const newList = this.state.list.reduce((acc, item, index) => {  
            item.aa.forEach((value, aaIndex) => {  
                acc.push({  
                    id: index * item.aa.length + aaIndex + 1, 
                    value  
                });  
            });  
            return acc;  
        }, []);
        console.log(newList,'newListnewList');
        this.setState({ list: newList });  
    } 
    onValueChange = (e) => {
        console.log(e);
        this.setState({
            values: e.target.value
        })
    }
    render() {
        return (
            <div>
                <input type="text" value={this.state.values} onChange={this.onValueChange} placeholder='请输入相关的内容' />
                <button onClick={()=>this.changeArr()}> 点击改变数组</button>
            </div>
        )
    }
}

prop-types校验

// 安装  prop-types
 npm install prop-types


// 基本使用

 import PropTypes from 'prop-types';
 class Greeting extends React.Component {
   render() {
     return (
       <h1>Hello, {this.props.name}</h1>
     );
   }
 }
 //定义该组件传入的props里面的name属性类型为string

 Greeting.propTypes = {
    name: PropTypes.string
  }



// 所有的格式样例

// Type	       Class	        Example
// String	PropType.string	  “helllo”
// Object	PropType.object	  {name: “Rohit”}
// Number	PropType.number	  10
// Boolean	PropType.bool	  true/false
// Function	PropType.func	  const say = {console.log(“hello”)}
// Symbol	PropType.symbol	  Symbol(“m”)