react在rc-form中如何获取ref

具体步骤
1.在getFieldProps中如下位置写ref,切记不能再input组件上写,否则无效
在这里插入图片描述在这里插入图片描述
2.获取实例
获取实例有两种方法,如下
在这里插入图片描述

完整代码如下

import React, { Component } from 'react'
import {  InputItem } from 'antd-mobile';
import $ from  'jquery'

class Input extends Component{
	constructor(props) {
        super(props);
        this.state = {
            inputInstance:null,//input框的实例
        };
	}
	componentWillMount(){  
	}
    onMouseUp = (e) => {
        e.preventDefault()
    }

    onFocus =()=>{
    }
  
    onInputClick =(e)=>{
    }
    inputRef=(e)=>{//方法一:获取inputItem组件下的input实例
        this.setState({
            inputInstance:e.inputRef.inputRef
        })
    }
    
	onBlur =(obj)=>{//方法二:获取inputItem组件下的input实例
	    let input = this.props.form.getFieldInstance(keyName).inputRef.inputRef
 		this.setState({
            inputInstance:input 
       	 })
    }
    onInput = (e) => {
    }
    onChange =(obj) =>{
    }

	render(){
	   const { keyName,initialValue } = this.props
        return (
               <InputItem
                    onBlur={ this.onBlur}
                    onFocus = {this.onFocus}
                    onInput={this.onInput}
                    onMouseUp={this.onMouseUp}
                    {...getFieldProps(keyName,
                        { 
                            initialValue:(initialValue||initialValue==0)?initialValue.toString():initialValue,
                            validateTrigger:['onClick','onChange'],
                            validateFirst: true,
                            rules:disabled==true?null:rules ,
                            onChange:(value)=>{this.onChange()},
                            onClick:(e)=>{this.onInputClick()},
                            ref:this.inputRef  //只能在此处获取,不能像以前一样在InputItem里获取
                        }
                    )}
                >
             </InputItem>
		)
	}
}

export default Input;





  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值