阅读 148

react点击父组件按钮,子组件input聚焦

这是我参与8月更文挑战的第19天,活动详情查看:8月更文挑战

核心思想

  • 父组件定义一个this.state.focus=false传入子组件,子组件通过props.fosus获取这个参数来判断是否执行focus()
  • 点击按钮通过this.setState来改变focus,此时会触发render重绘,子组件获取的props.focus被更新,从而使得focus执行;这里我遇到一个问题我在Son组件定义了一个私有方法isFocus!

然后在render中执行这个方法,结果没有达到预期效果。
原因: isFocus的执行时间在render之前,所以var a = document.createElement('input')执行时还没有这个元素,即获取不到这个元素;所以必须在dom渲染之后再执行这句话才是对的。
综上所述: isFocus定义在componentDidUpdate里面才可以;因为虽然第一次执行的是componentDidMount,但此时是初始化状态,不需要获取该元素,而每次render重绘之后,需要获取元素,时机就是在componentDidUpdate执行之后(此时dom就已经渲染)。

image.png

Father.js

import React from "react"
import {render} from "react-dom"
import Son from "./Son.js"

class Father extends React.Component{
    constructor(){
        super();
        this.state={
            'focus':false
        };
        console.log("Father Constructor")
    }
    click(){
        this.setState({
            'focus':true
        });
    }
    render() {
        return(
            <div>
                <input type="button" value='父组件'  onClick={(this.click).bind(this)} />
                <Son focus={this.state.focus}/>
            </div>
        )
    }
}
export  default Father
复制代码

Son.js

import React from "react"
import {render} from "react-dom"

class Son extends React.Component{
    constructor({focus}){
        super();


    }
    componentDidUpdate(prevProps, prevState, snapshot) {
        var self = this;
        var a= document.getElementById('input');
        !function isFocus(){
            if (self.props.focus){
                a.focus()
            }
        }()
    }
    render() {

        return(
            <div>
                <input type="text" value='' ref='a' id='input'/>
            </div>
        )
    }
}
export  default Son
复制代码

总结

可以把这当成一个模板:父组件需要对子组件进行干预时,可传一个变量来,然后子组件通过this.props.val来进行判断是否执行操作

但是有一个隐患点带考量,一般来说一个组件不会过多的依赖props,但是显然这里的props太依靠父元素提供的状态了,显然不符合常理。所以还需要更好的考量可行性

文章分类
前端
文章标签