简单的复现代码如下:
class FormModal extends Component{
constructor(props){
super()
this.formRef = React.creatRef()
this.state={
firstValue:"test"
}
}
componentDidMount(){
this.refs.current.setFieldsValue({firstItem:this.state.firstValue})
//此时,会报错,this.refs.current为null什么的
}
render(){
return (
<Modal>
<Form
ref={this.formRef}
>
<Form.Item
name="firstItem"
>
<Input/>
</Form.Item>
</Form>
</Modal>
)
}
}
最初做的解决方案为,给this.refs外面加了个定时器
componentDidMount(){
this.setTimeOut(()=>{
this.refs.current.setFieldsValue({firstItem:this.state.firstValue})
},0)
//这样确实可以解决,但总是感觉不太严谨
}
之后通过查阅issues,发现了另一个解决方法,将Modal放到Form里面
<Form
ref={this.formRef}
>
<Modal>
<Form.Item
name="firstItem"
>
<Input/>
</Form.Item>
</Modal>
</Form>
issues中描述的原因是,Modal渲染没有Form实例化,通过外层包Form,里面放Modal,实现componentDidMount中Form的ref的获取。
说实话,“Modal渲染没有Form实例化”这局话,我也不太理解,但是这样做确实能够解决这个问题,盼大神告知一下这个意思,谢谢
如果对您有一丝的帮助,请赏个赞可好~