23 Refs的应用场景与选用思考

Refs含义

• 允许访问真实DOM
• React数据流：通过props来实现父子组件的交互
• Refs允许强制修改子组件

// 1. 构造器离添加实例属性 this.ref = React.createRef()
// 2. 组件上绑定ref ref={this.ref}
// 3. 使用：this.ref.current

input

class MyInput extends React.Component {
   
    constructor(props) {
   
        super(props)
        this.inputRef = React.createRef()
    }
    state = {
   
        value: '123'
    }
    // 聚焦 失焦
    inputFocus = () => {
   
        const oInput = this.inputRef.current
        oInput.focus()
        oInput.value = ''
    }
    inputBlur = () => {
   
        const oInput = this.inputRef.current
        oInput.blur()
        oInput.value = ''
    }
    changeInputValue = (e) => {
   
        this.setState({
   
            value: e.target.value
        })
    }
    render() {
   
        return (
            <div>
                <input
                    type="text"
                    ref={
   this.inputRef}
                    value=