后端开发学React - 5 PropTypes校验及Ref绑定

后端开发学React - 5 PropTypes校验及Ref绑定

5.1 PropTypes校验

PropTypes，这里用的比较多的是三种

1. 类型校验
2. 非空校验
3. 使用默认值

使用时先进行PropTypes引入

import PropTypes from 'prop-types'

然后在类的外面编写

1. 类型校验

//1. PremierLeagueRegisterItem.js 是 PremierLeagueRegister.js的子组件
//2. testValidate 是父组件向子组件传递的参数
PremierLeagueRegisterItem.propTypes={
    testValidate:PropTypes.string
}

如果没有类型校验，子组件需要string类型，但是父组件向子组件如果传递的是number类型，控制台是不报错的，但是加上了类型校验，就会出现报错信息，使程序更加具有健壮性

2. 非空校验

//1. PremierLeagueRegisterItem.js 是 PremierLeagueRegister.js的子组件
//2. testValidate 是父组件向子组件传递的参数
PremierLeagueRegisterItem.propTypes={
    testValidate:PropTypes.string.isRequired
}

这里注意：如果想使用isRequired校验，前面需要先进行类型校验，然后调用isRequire

3. 使用默认值

//1. PremierLeagueRegisterItem.js 是 PremierLeagueRegister.js的子组件
//2. testValidate 是父组件向子组件传递的参数
PremierLeagueRegisterItem.defaultProps={
    testValidate:'测试默认值'
}

这里有个小坑，如果testValidate传null，没有办法显示默认值
只有父组件压根不传递这个参数的时候，这个defaultProps才是好用的

5.2 Ref绑定

ref 个人认为主要的作用就是干掉 e.target
使整个程序更加的语义化

1. 改造前

• JSX部分

<input 
    value={this.state.inputValue} 
    onChange={this.inputChange.bind(this)}
    />

• 方法部分

inputChange(e){
    this.setState({
        inputValue:e.target.value
    })
}

2. 改造后

• JSX部分（这里用到了es6中的箭头函数：(input)=>{this.input=input} ）

<input 
    value={this.state.inputValue} 
    ref={(input)=>{this.input=input}}
    onChange={this.inputChange.bind(this)}
    />

• 方法部分

inputChange(e){
    this.setState({
        inputValue:this.input.value
    })
}