componentDidMount获取form的ref值为null

简单的复现代码如下:

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实例化”这局话,我也不太理解,但是这样做确实能够解决这个问题,盼大神告知一下这个意思,谢谢

如果对您有一丝的帮助,请赏个赞可好~

回答: 在React中,可以通过使用ref获取子组件的引用。然而,有时候可能会遇到无法获取子组件ref的问题。根据提供的引用内容,可以看到有两种常见的解决方法。 第一种方法是使用回调函数来获取子组件的ref。在父组件中,可以通过将一个回调函数作为props传递给子组件,并在子组件中调用该回调函数来将子组件的引用传递给父组件。例如,可以在父组件中定义一个回调函数,并将其作为props传递给子组件: ```javascript handleShowModalAdd = () => { this.add.handleToggle() // handleToggle为子组件中的方法 } <SystemAdd onRef={(ref) => this.add = ref} /> ``` 在子组件中,可以通过调用该回调函数并传递子组件的引用来将子组件的引用传递给父组件。例如,在子组件的`componentDidMount`生命周期方法调用该回调函数: ```javascript componentDidMount() { this.props.onRef(this) } ``` 这样,父组件就可以通过`this.add`来访问子组件的方法和属性了。 第二种方法是使用React.createRef()来创建一个ref对象,并将其赋值给子组件的ref属性。在父组件中,可以使用`React.createRef()`来创建一个ref对象,并将其赋值给子组件的ref属性: ```javascript handleShowModalAdd = () => { this.add.current.handleToggle() // handleToggle为子组件中的方法 } constructor(props) { super(props); this.add = React.createRef(); } <SystemAdd ref={this.add} /> ``` 然后,可以通过`this.add.current`来访问子组件的方法和属性。 综上所述,以上两种方法都可以用来解决React无法获取子组件ref的问题。具体使用哪种方法取决于你的需求和代码结构。 #### 引用[.reference_title] - *1* [react子组件被rc-form createForm()后,父组件无法获取子组件的ref](https://blog.csdn.net/u012570307/article/details/118108123)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [react-redux使用时利用ref调用子组件方法不可用报错](https://blog.csdn.net/Chris__wang/article/details/97390279)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值