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

核心思想

• 父组件定义一个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就已上树，可以获取元素。

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来进行判断是否执行操作