formRef=React.createRef() this.formRef.current为null

最新推荐文章于 2026-04-18 02:54:28 发布

原创

最新推荐文章于 2026-04-18 02:54:28 发布 · 4.8k 阅读

标签

#react.js #前端 #antd #Form

收录于

本文探讨了在使用Ant Design (AntD) 构建商品详情页时遇到的Form组件加载问题。具体表现为Form组件未能正确初始化，导致无法操作表单字段。文章分析了问题原因，并给出了解决方案，特别是关于Skeleton组件加载状态对Form组件的影响。

情景说明:

做一个商品查看的页面，商品信息回显，使用的antd，部分代码如下：

.......

export default class GoodsDetail extends React.Component{ 
	ggxhForm = React.createRef();
	constructor(props) {
	    super(props)
		this.state={
			....
			ggxhs:[],
		}
	}
	componentDidMount(){
		service.post(.....).then(res => {
			if (res.data.code === '0000') {
			    this.setState({
                    .....
					ggxhs:res.data.data.ggxhs
				},()=>{
					setTimeout(() => {
					     console.log(this.ggxhForm);
					 }, 100);
				
				})
			}
		})
	}

	render(){
		return (
		    <div className={gdetail.container}>
                ......
			<Row> 
			   <Skeleton>	
				   <Form name="hhhhh"
				         layout="vertical"
						 ref={this.ggxhForm}
						 initialValues={
  
  {"ggxhs": this.state.ggxhs}}>
				   		    ......
				   		</Form>
			      </Skeleton>
			</Row>
		</div>
		)
	}
	
}