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
    评论
react-native-reanimated 是一个 React Native 库,用于实现高性能、流畅的动画和交互效果。在 Android react-native-reanimated 的使用方式与在 iOS 基本相同。以下是 react-native-reanimated 在 Android 的用法: 1. 安装 react-native-reanimated 在项目根目录运行以下命令: ``` npm install react-native-reanimated ``` 或者使用 yarn: ``` yarn add react-native-reanimated ``` 2. 连接 react-native-reanimated 在项目根目录运行以下命令: ``` react-native link react-native-reanimated ``` 3. 在代码使用 在需要使用 react-native-reanimated 的组件或页面,首先导入库: ```javascript import Animated from 'react-native-reanimated'; ``` 然后就可以使用 Animated 提供的各种动画和交互效果了。例如,以下代码实现了一个在点击时平移的按钮: ```javascript import React, { useState } from 'react'; import { View, TouchableOpacity, StyleSheet } from 'react-native'; import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated'; const App = () => { const [isPressed, setIsPressed] = useState(false); const translateX = useSharedValue(0); const handlePressIn = () => { setIsPressed(true); translateX.value = withSpring(-50); }; const handlePressOut = () => { setIsPressed(false); translateX.value = withSpring(0); }; const animatedStyle = useAnimatedStyle(() => { return { transform: [{ translateX: translateX.value }], }; }); return ( <View style={styles.container}> <TouchableOpacity onPressIn={handlePressIn} onPressOut={handlePressOut} activeOpacity={0.8} > <Animated.View style={[styles.button, animatedStyle]}> <Text style={styles.text}>{isPressed ? 'Pressed' : 'Press me'}</Text> </Animated.View> </TouchableOpacity> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', }, button: { width: 120, height: 40, borderRadius: 20, backgroundColor: 'blue', alignItems: 'center', justifyContent: 'center', }, text: { color: 'white', fontWeight: 'bold', }, }); export default App; ``` 在这个例子,我们使用了 useSharedValue 创建了一个共享变量 translateX,表示按钮在 x 轴方向的平移量。在 handlePressIn 和 handlePressOut ,我们分别更新了按钮的状态和 translateX 的值,使用 withSpring 让按钮平滑地过渡到新的位置。最后,我们使用 useAnimatedStyle 创建了一个动画样式 animatedStyle,并将其应用到了按钮的样式。 以上就是 react-native-reanimated 在 Android 的基本用法。要了解更多关于 react-native-reanimated 的内容,请参考官方文档。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值