在键入字符后,TextInput失去焦点时遇到问题。它仅在我的自定义TextInput对象中发生。键入每个字符后,将键盘关闭,我必须重新选择该对象才能恢复键盘。
我只在Android手机上运行此代码。我不确定iOS如何运作。
我已经浏览了该站点上的许多线程以及其他线程,但找不到任何可以保持焦点的东西。
在下面的代码中,我包括了2个TextInput对象。一个是我的自定义对象MyTextInput。另一个是通用的TextInput对象。当在通用文本中输入文本时,一个焦点不会丢失并且不会关闭键盘。在习惯中,一个焦点丢失并且键盘消失。
任何帮助都会得到帮助。
import React, { Component , useState} from 'react';
import {
View,
Text,
TextInput,
Button,
StyleSheet,
} from 'react-native';
const Form = () => {
const [values, setValues] = useState({ email: "", a: ""});
const MyTextInput = ({ valueVar, name, type, onChange }) => {
return (
<TextInput
style={styles.textInputStyle}
value={valueVar}
onChangeText={text => onChange({ name, type, text })}
/>
);
};
const handleChange = (event) => {
const {name, type, text} = event;
setValues({...values, [name]: text})
}
const handleChangeTI = (text) => {
setValues({...values, a: text})
}
return (
<View style={styles.containerStyle}>
<View>
<Text style={styles.textStyle}>email </Text>
<MyTextInput
name="email"
type="text"
valueVar={values.email}
onChange={handleChange}
>
</MyTextInput>
</View>
<View>
<Text style={styles.textStyle}>TextInput</Text>
<TextInput
style={styles.textInputStyle}
value={values.a}
onChangeText={handleChangeTI}
/>
</View>
</View>
); // return
}; // const
export default Form;
const styles = StyleSheet.create ({
containerStyle:
{
flexDirection:'column',
alignItems: 'center',
justifyContent: 'center',
flex: 1,
backgroundColor: 'white',
},
textStyle:
{
color: 'green',
height: 30,
width: 200,
fontSize: 18,
},
textInputStyle:
{
color: 'black',
height: 40,
width: 200,
borderWidth: 1,
borderColor: 'red',
backgroundColor: 'gray',
textDecorationLine: 'none',
fontSize: 15,
},
})
答案 0 :(得分:0)
每次输入内容时,都会重新创建并重新渲染您的MyTextInput
组件。将函数移到新文件中或移至Form
组件之外。
import React, { Component , useState } from 'react';
import {
View,
Text,
TextInput,
Button,
StyleSheet,
} from 'react-native';
const MyTextInput = ({ valueVar, name, type, onChange }) => {
return (
<TextInput
style={styles.textInputStyle}
value={valueVar}
onChangeText={text => onChange({ name, type, text })}
/>
);
};
const Form = () => {
const [values, setValues] = useState({ email: "", a: ""});
const handleChange = (event) => {
const {name, type, text} = event;
setValues({...values, [name]: text})
}
const handleChangeTI = (text) => {
setValues({...values, a: text})
}
return (
<View style={styles.containerStyle}>
<View>
<Text style={styles.textStyle}>email </Text>
<MyTextInput
name="email"
type="text"
valueVar={values.email}
onChange={handleChange}
>
</MyTextInput>
</View>
<View>
<Text style={styles.textStyle}>TextInput</Text>
<TextInput
style={styles.textInputStyle}
value={values.a}
onChangeText={handleChangeTI}
/>
</View>
</View>
); // return
}; // const
export default Form;
const styles = StyleSheet.create({
containerStyle:
{
flexDirection:'column',
alignItems: 'center',
justifyContent: 'center',
flex: 1,
backgroundColor: 'white',
},
textStyle:
{
color: 'green',
height: 30,
width: 200,
fontSize: 18,
},
textInputStyle:
{
color: 'black',
height: 40,
width: 200,
borderWidth: 1,
borderColor: 'red',
backgroundColor: 'gray',
textDecorationLine: 'none',
fontSize: 15,
},
});