核心思想父组件定义一个this.state.focus=false 传入子组件,子组件通过props.fosus获取这个参数来判断是否执行focus() 点击按钮通过this.setState 来改变focus,此时会触发render重绘,子组件获取的props.focus被更新,从而使得focus执行; 这里我遇到一个问题 我在Son组件定义了一个私有方法isFocus
![在这里插入图片描述](http://image109.360doc.com/DownloadImg/2020/02/2217/183519170_1_20200222050422470) 然后在render中执行这个方法,结果没有达到预期效果。
原因 isFocus的执行时间在render之前,所以var a = document.createElement('input') 执行时还没有这个元素,即获取不到这个元素;所以必须在dom上树后再执行这句话才对。 综上所述 isFocus定义在componentDidUpdate里面才对; 因为虽然第一次执行的是componentDidMount,但此时是初始化状态,不需要获取该元素,而每次render重绘之后,componentDidUpdate执行之后dom就已上树,可以获取元素。
Father.jsimport 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.jsimport 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 来进行判断是否执行操作
|