求大神帮帮。怎么主动取消输入框的焦点



  • [怎么让输入框失去焦点]!
    本人小白一名,自己动手做公司一项目,遇到很多不能解决的问题,今天又出现了?自己百度google都已经没有办法解决,现在有求于 社区大神们。

    两个输入框 TextInput
    默认输入框1获取焦点。
    现在的情况:1.点击输入框2,输入框2获取焦点,点击输入框1,输入框1获取焦点。
    2.点击输入框以外的地方,没有办法让焦点从输入框移除!
    感觉RN文档不是恨全面,感觉这个要求已经很低了 还是不能满足,真的要放弃吗?贴出我的代码 希望大神能帮一把!
    import React, {
    Text,
    Image,
    View,
    StyleSheet,
    Dimensions,
    TouchableOpacity,
    Animated,
    Easing,
    LayoutAnimation,
    ScrollView,
    TouchableWithoutFeedback,
    TextInput,
    } from 'react-native'
    const {width, height}=Dimensions.get('window')

    const appStyles = require('../../styles')

    import {MKTextField, MKColor, mdl} from 'react-native-material-kit'
    //定义样式对象styles: 合并样式
    const styles = Object.assign({}, appStyles, StyleSheet.create({
    imgBgc: {
    width: width,
    alignItems: 'center',

    },
    imgColse: {
        width: 0.1 * width,
        flex: 2,
        left: 0.21 * width,
        marginTop: 0.025 * width,
    },
    imgLogo: {
        width: 0.3 * width,
        flex: 4,
    },
    imgText: {
        width: 0.5 * width,
        flex: 4,
    },
    textfieldWithFloatingLabel: {
        height: 48,  // have to do it on iOS
        marginTop: 20,
        marginLeft: 0.1 * width,
        marginRight: 0.1 * width
    },
    inputContainer: {
        flex: 5,
    
    },
    textBtn: {
        alignSelf: 'center',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#ff9800',
        width: 0.8 * width,
        height: 0.1 * width,
        marginTop: 0.1 * width,
        borderRadius: 0.05 * width
    },
    textLogin: {
        color: '#fff',
        fontSize: 20,
    },
    textRegContainer: {
        alignSelf: 'center',
        flexDirection: 'row',
        marginTop: 0.07 * width,
        justifyContent: 'center',
        alignItems: 'center'
    },
    textNo: {
        color: '#727272'
    },
    textReg: {
        color: '#03a9f4',
        fontSize: 21
    }
    

    }))

    //定义组件对象,注意,styles必须定义在组件前面
    const TextfieldWithFloatingLabel = MKTextField.textfieldWithFloatingLabel()
    .withPlaceholder('请输入账号...')
    .withStyle(styles.textfieldWithFloatingLabel)

    .withKeyboardType('numeric')
    .build();
    

    const PasswordInput = mdl.Textfield.textfieldWithFloatingLabel()
    .withPassword(true)
    .withPlaceholder('请输入密码')
    // .withHighlightColor(MKColor.Lime)
    .withStyle(styles.textfieldWithFloatingLabel)
    .build()
    export default class Login extends React.Component {
    // 构造,动画等
    constructor(props) {
    super(props);
    // 初始状态
    this.state = {
    flexN: width,
    bouceValue: new Animated.Value(0)
    };
    }

    componentWillMount() {
        LayoutAnimation.linear();
        LayoutAnimation.spring()
        LayoutAnimation.easeInEaseOut()
    }
    
    componentDidMount() {
    
        Animated.spring(
            this.state.bouceValue,
            {
                toValue: 1,
                duration: 2000,
                friction: 1,
    
            }
        ).start();
    }
    
    render() {
        return (
            //默认keyboardShouldPersistTaps={false}时,组件不能第一时间获取事件,总是被scrollview拦截,
            //定义触摸组件 包括整个视图,让其尝试取消输入框焦点失败. 因为TextInput没有失去焦点的方法可以调用
            <ScrollView keyboardShouldPersistTaps={true}>
                
                <TouchableWithoutFeedback onPress={()=>{
                     LayoutAnimation.spring();
                             this.setState({flexN:width})
    
                    }}>
                    <View >
                        <Image style={[styles.imgBgc,{height:this.state.flexN}]}
                               source={require('../../img/LoginTopBG.png')}
                               resizeMode="cover">
                            <TouchableOpacity style={styles.imgColse} onPress={()=>{
                        this.props.navigator.push({name:'main'})
                    }}>
                                <Image
                                    style={styles.imgColse}
                                    source={require('../../img/LoginTopColseBtn.png')}
                                    resizeMode="contain"
                                />
                            </TouchableOpacity>
                            <Animated.Image
                                style={[styles.imgLogo,{transform:[
                            {
                            rotateY:this.state.bouceValue.interpolate({
                                inputRange:[0,1],
                                outputRange:['0deg','360deg']
                            })
                            }
                        ]}]}
                                source={require('../../img/Logo.png')}
                                resizeMode="contain"
                            />
                            <Image
                                style={styles.imgText}
                                source={require('../../img/LoginTopText.png')}
                                resizeMode="contain"
                            />
                        </Image>
                        <View style={styles.inputContainer}>
                            <TextfieldWithFloatingLabel
                                ref='user'
                                clearButtonMode="always"
    
                                ref="userInput"
                                onFocus={()=>{
                            LayoutAnimation.spring();
                             this.setState({flexN:0.7*width})
    
                             }}
                            ></TextfieldWithFloatingLabel>
                            <PasswordInput
                                onFocus={()=>{
                            LayoutAnimation.spring();
                             this.setState({flexN:0.7*width})
    
                             }}
                            ></PasswordInput>
                            <TouchableOpacity style={styles.textBtn}>
                                <Text style={styles.textLogin}>登陆</Text>
                            </TouchableOpacity>
                            <View style={styles.textRegContainer}>
                                <Text style={styles.textNo}>没有账号? </Text>
                                <TouchableOpacity>
                                    <Text style={styles.textReg}>注册</Text>
                                </TouchableOpacity>
                            </View>
                        </View>
                    </View>
                </TouchableWithoutFeedback>
            </ScrollView>
        )
    }
    

    }



  • this.refs[textinput].blur() 你这样试一试可行不。我之前就是这样干的。



  • @qiuting 说:

    textinput
    谢谢 ,可行,非常感谢,官网的文档里没有blur,没有其他编程基础 学起来 确实费劲。。 this.refs.userInput.blur() refs.userinput 生效,



  • @千夫指 难道要在页面其他区域一个press事件,触发this.refs.userInput.blur()吗?