react中this的绑定 父传子 有状态组建（input）无状态组建

1.this绑定

1.在jsx中绑定this：

{ <button onClick={this.f1.bind(this)} >修改状态</button> }

2.在构造器里面绑定this：

this.f1 = this.f1.bind(this)

3.将函数写到jsx中，箭头函数不读取this：

{<button onClick={()=>{console.log(this)}}>修改状态</button>}

2.父子组件传值

父组件

this.state = {
    age:23
};
......
return (
  <>
    <h2>父组件</h2>
    <Child age={this.state.age} ></Child>
  </>
);

子组件

super(props);
 .....
return (
  <div>
    <div>子组件</div>
    <p>{this.props.age}</p>
  </div>
)

3.input 无状态--->有状态

4.无状态组建默认值和数据类型校验

import PropTypes from "prop-types";