我正在构建具有React Antial的Android应用程序。
如何将TextInput强加于" untocus"，这意味着光标在文本字段内闪烁。isFocused()和onFocus()有功能，但是我如何真正获得文本字段以放弃焦点。您会认为一旦我击中Enter，就会自动这样做，但事实并非如此。
import React, {Component} from 'react';
import { AppRegistry, Text, View, StyleSheet, TextInput, TouchableOpacity}
from 'react-native';
var SHA256 = require("crypto-js/sha256");
export default class LoginForm extends Component{
constructor(props){
super(props);
this.state = {
email: '',
password:''
};
}
tryLogin = () => {
if(this.state.email=="email123" && this.state.password == "password"){
console.log("password verified");
this.props.navigator.replace({
title: 'Dashboard'
});
}
console.log(this.state.email);
console.log(this.state.password);
console.log("Hash" + SHA256(this.state.password));
}
render(){
return(
<View style={styles.container}>
<TextInput
style={styles.input}
placeholder="Email address"
placeholderTextColor="white"
onChangeText={(email) => this.setState({email})}>
</TextInput>
<TextInput style={styles.input}
placeholder="Password"
placeholderTextColor="white"
secureTextEntry
onChangeText={(password) => this.setState({password})}>
</TextInput>
<TouchableOpacity style={styles.loginButtonContainer} onPress={this.tryLogin}>
<Text style={styles.loginButtonText}>LOGIN</Text>
</TouchableOpacity>
</View>
);
}
}
AppRegistry.registerComponent('LoginForm', () => LoginForm);
const styles = StyleSheet.create({
container: {
padding: 20
},
input:{
height: 40,
backgroundColor: '#e74c3c',
marginBottom: 20,
color: 'white',
paddingHorizontal: 15,
opacity: .9
},
loginButtonContainer:{
justifyContent: 'center',
backgroundColor: '#bc4c3c',
paddingVertical:15
},
loginButtonText:{
textAlign:'center',
color:'white',
fontWeight: '700',
fontSize: 24
}
})
这可能对真实用户无关紧要，但是我只是在模仿和讨厌的话，如果我想重新加载。
一种更好的方法是使用 scrollview 和键盘。dismiss。通过使用 scrollview 在用户轻按文本输入之外时，键盘被取消。之所以这样做，是因为 scrollview 键盘的默认属性是从不。这是用户期望的行为。为了解散键盘，或者是等效的模糊 textInput ，当用户点击登录按钮上时，请添加键盘。功能。
import React, {Component} from 'react';
import { AppRegistry, Text, View, StyleSheet, TextInput, TouchableOpacity, ScrollView, Keyboard}
from 'react-native';
var SHA256 = require("crypto-js/sha256");
export default class LoginForm extends Component{
constructor(props){
super(props);
this.state = {
email: '',
password:''
};
}
tryLogin = () => {
Keyboard.dismiss();
if(this.state.email=="email123" && this.state.password == "password"){
console.log("password verified");
this.props.navigator.replace({
title: 'Dashboard'
});
}
console.log(this.state.email);
console.log(this.state.password);
console.log("Hash" + SHA256(this.state.password));
}
render(){
return(
<ScrollView style={styles.container}>
<TextInput
style={styles.input}
placeholder="Email address"
placeholderTextColor="white"
onChangeText={(email) => this.setState({email})}>
</TextInput>
<TextInput style={styles.input}
placeholder="Password"
placeholderTextColor="white"
secureTextEntry
onChangeText={(password) => this.setState({password})}>
</TextInput>
<TouchableOpacity style={styles.loginButtonContainer} onPress={this.tryLogin}>
<Text style={styles.loginButtonText}>LOGIN</Text>
</TouchableOpacity>
</ScrollView>
);
}
}
AppRegistry.registerComponent('LoginForm', () => LoginForm);
const styles = StyleSheet.create({
container: {
padding: 20
},
input:{
height: 40,
backgroundColor: '#e74c3c',
marginBottom: 20,
color: 'white',
paddingHorizontal: 15,
opacity: .9
},
loginButtonContainer:{
justifyContent: 'center',
backgroundColor: '#bc4c3c',
paddingVertical:15
},
loginButtonText:{
textAlign:'center',
color:'white',
fontWeight: '700',
fontSize: 24
}
})
您可以使用键盘 api。
import { Keyboard, TextInput } from 'react-native';
<TextInput
onSubmitEditing={Keyboard.dismiss}
/>
请参阅React Native Costical Document中的完整示例。
我设法用this.ref参考来解决此问题。首先，您将ref分配给TextInput，因此：
<input ref="myInput" />
然后，您将blur((方法调用函数
的this.refs.myInput blurTextInput(){
this.refs.myInput.blur()
}
我的用例有所不同。用户不会在输入字段中直接输入值。该字段主要用于捕获用户输入值并打开模态的尝试。我想在模态关闭后模糊该领域，以减少用户以后必须进行的额外点击。
如果使用钩子，您可以做一些像
一样简单的事情const inputRef = useRef(null);
<Input
ref={inputRef}
{...props}
/>
然后只需将其调用您需要的任何地方。
inputRef.current.blur();
实际上找到了它。它看起来不那么漂亮，我的直觉说这不是一个非常"反应"的解决方案，但是如果您在这里想要它。
<TextInput
style={styles.input}
ref="email_input"
onSubmitEditing={() => this.refs['email_input'].blur()}
placeholder="Email address"
placeholderTextColor="white"
onChangeText={(email) => this.setState({email})}/>
它可以执行所需的工作
function TextInputCustom({ placeholder, style }) {
React.useEffect(() => {
const keyboardHide = Keyboard.addListener('keyboardDidHide', () => {
Keyboard.dismiss();
});
return () => {
keyboardHide.remove()
}
}, []);
return (
<TextInput
style={style}
placeholder={placeholder}
/>
)
}
export default TextInputCustom;
我在外面的键盘上解开键盘，如
<View onTouchStart={()=>Keyboard.dismiss()} style={{flex: 1, width: "100%"}}>
<KeyboardAvoidingView style={{flex: 1}}>
<TextInput></TextInput>
</KeyboardAvoidingView>
</View>
noah的答案效果很好，但是现在在React中不建议使用String Refs，并且很可能很快就会被弃用。相反，您应该使用要引用渲染的组件时会调用的回调函数。
<TextInput
ref={(c: any) => {
this.textInputRef = c;
}}
onSubmitEditing={() => this.textInputRef.blur()}
/>
如果您使用的是流，则可以通过在渲染函数之外放置这样的内容来指定您的参考的类型：
textInputRef: ?TextInput;
如果您想在提交后失去焦点，请使用BluronSubmit属性。
<TextInput
blurOnSubmit={true}
//other props
/>
我使用了以下代码，对我来说很完美：我将所有视图包装在touchablewithablewithoutfeedback和onpress = {((=＆gt;{keyboard.dismiss((;}}
import {View,TouchableWithoutFeedback,Keyboard,} from 'react-native';
......
<SafeAreaView>
<ScrollView nestedScrollEnabled={true}>
<TouchableWithoutFeedback
onPress={() => {Keyboard.dismiss();}}>
<View style={styles.container}>
{/* ..... */}
</View>
</TouchableWithoutFeedback>
</ScrollView>
</SafeAreaView>