具体步骤
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;