React 三大属性

React ref

React提供的这个ref属性，表示为对组件真正实例的引用

字符串类型

class Pserson extends React.Component {
       
   state = {isTeacher: false}

   showDate = ()=>{
      //函数体
      // const {input1} = this.refs.input1
      alert(this.refs.input1.value);
    }

   showDate2 = ()=>{
     alert(this.refs.input2.value);
   }

   render(){
     return (
        <div>
         <input ref="input1" type="text" placeholder="点击按钮提示数据"/>
         <button onClick={this.showDate2}>点我提示左侧数据</button>
         <input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
        </div>
      );
   }
}

回调函数形式ref

class Pserson extends React.Component {

  state = {
    isHot: false,
    isTeacher: false
  }

  showDate = ()=>{
    //函数体
    // const {input1} = this.refs.input1
    alert(this.input1.value);
  }

  showDate2 = ()=>{
    alert(this.input2.value);
  }

  changeWeather = ()=>{
    this.setState({
      isHot: !this.state.isHot
    })
  }

  render(){
    return (
      <div>
        <h2>今天天气{this.state.isHot?'炎热':'凉爽'}</h2>
        <button onClick={this.changeWeather}>点击改变天气</button>
        <br></br>
        <br></br>
        <input ref={(currentNode)=>{this.input1 = currentNode }} type="text" placeholder="点击按钮提示数据"/>
        <button onClick={this.showDate}>点我提示左侧数据</button>
        <input ref={(currentNode)=>{this.input2 = currentNode }} onBlur={this.showData2} type="text" placeholder="失去焦点提示"/>
      </div>
    );
  }
}

createRef

// 创建组件
class Pserson extends React.Component {

  state = {
    isHot: false,
    isTeacher: false
  }

  // React.createRef()调用后可以返回一个容器， 该容器可以存储被 ref 所标识的节点, 该容器时专人专用
  myRef = React.createRef()
  myRef2 = React.createRef()

  showDate = ()=>{
    //函数体
    // const {input1} = this.refs.input1
    alert(this.myRef.current.value);
  }

  // 传入的 event 即发生事件的 DOM对象
  showDate2 = (event)=>{
    alert(event.tatget.value);
  }

  render(){
    return (
      <div>
        <input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>
        <button onClick={this.showDate}>点我提示左侧数据</button>
        <input onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
      </div>
    );
  }
}

React state

通过 this.setState 设置一组属性

//1.创建类式组件
class Weather extends React.Component{
    //给实例添加属性
    state = {
      isHot:false,
      isWind:false
    };

    // 若内部 this无指向， 就使用外部this， 将函数绑定在属性上
    changeWeatherState = ()=>{
        this.setState({
          isHot: !this.state.isHot
        });
    }

    render(){
      return (
        <div>
          <h1 onClick={this.changeWeatherState}>今天天气很 {this.state.isHot?'炎热':'寒冷'}</h1>
        </div>
      );
    }
}

//2. 渲染组件页面
ReactDOM.render(<Weather/>, document.getElementById('test'))

React props

// 创建组件
class Pserson extends React.Component {
     //对标签属性进行类型默认值限制
     // props 是只读的
     // static 代表属性是加给类的， 没有 static 是给实例加属性
     static propTypes = {
        name: PropTypes.string.isRequired, //限制 name 为 String 且必传
        sex: PropTypes.string,  //限制 sex 为性别
        age: PropTypes.number, //限制 age 为数字
        speak: PropTypes.func //限制 speak为函数
     }

    //设置默认属性
    static defaultProps = {
        age: '20',
    }

    state = {isTeacher: false}

    render(){
      return (
        <div>
          <ul>
            <li>姓名: {this.props.name}</li>
            <li>性别: {this.props.sex}</li>
            <li>年龄: {this.props.age+1}</li>
          </ul>
        </div>
      );
   }
}

//2. 渲染组件页面
ReactDOM.render(<Pserson name="tom" sex="男" age={19}/>, document.getElementById('test'));
const p = {name:'老刘', age:18, sex: '男'};
// ReactDOM.render(<Pserson name={p.name} sex={p.sex} age={p.age}/>,  document.getElementById('test2'));
ReactDOM.render(<Pserson {...p}/>,  document.getElementById('test2'));