我想在React Native中创建和使用一个CustomTextInput。我已经按照下面的代码创建了它，但是CustomTextInput中的onChangeText属性没有正常工作。
尽管进行了广泛的研究，但我无法找出问题的原因。我可能漏掉了什么？
import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import { TextInput } from 'react-native';
const App = () => {
const [inputValue, setInputValue] = useState('');
const CustomTextInput = ({ value, onChangeText, placeholder, style }) => {
return (
<TextInput
value={value}
onChangeText={onChangeText}
placeholder={placeholder}
style={style}
/>
);
};
const handleTextChange = (text) => {
setInputValue(text);
};
return (
<View style={styles.container}>
<CustomTextInput
value={inputValue}
onChangeText={handleTextChange}
placeholder="自定义，不工作..."
style={styles.textInput}
/>
<TextInput
value={inputValue}
onChangeText={handleTextChange}
placeholder={"工作中.."}
style={styles.textInput}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f0f0f0',
},
textInput: {
width: '80%',
height: 40,
borderWidth: 1,
borderColor: 'gray',
padding: 10,
},
});
export default App;
你也可以在这里检查 https://snack.expo.dev/@cemyeten/handling-text-input
如我所见，您在组件内部创建了一个组件并使用它。
但是，由于您在组件内部创建了一个功能组件，每次发生状态更新时它都会重新创建。
更好的选择是将CustomTextInput移出屏幕或任何具有状态的组件。
例如：
import React, { useState } from 'react'; import { View, StyleSheet } from 'react-native'; import { TextInput } from 'react-native'; const CustomTextInput = ({ value, onChangeText, placeholder, style }) => { return ( <TextInput key='a' value={value} onChangeText={onChangeText} placeholder={placeholder} style={style} /> ); }; const App = () => { const [inputValue, setInputValue] = useState(''); const handleTextChange = (text) => { setInputValue(text); }; return ( <View style={styles.container}> <CustomTextInput value={inputValue} onChangeText={handleTextChange} placeholder="自定义，不起作用..." style={styles.textInput} /> <TextInput value={inputValue} onChangeText={handleTextChange} placeholder={"起作用.."} style={styles.textInput} /> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f0f0f0', }, textInput: { width: '80%', height: 40, borderWidth: 1, borderColor: 'gray', padding: 10, }, }); export default App;将您的组件放在
App函数之外，或者更好的方法是为其创建一个单独的文件，因为如果您将其放在内部，当您编写文本useState hook重新渲染App函数以在UI上反映它，这将使您的组件失去焦点。修复的代码：
import React, { useState } from 'react'; import { View, StyleSheet } from 'react-native'; import { TextInput } from 'react-native'; const CustomTextInput = ({ value, onChangeText, placeholder, style,...other }) => { return ( <TextInput value={value} onChangeText={onChangeText} placeholder={placeholder} style={style} {...other} /> ); }; const App = () => { const [inputValue, setInputValue] = useState(''); const handleTextChange = (text) => { setInputValue(text); }; return ( <View style={styles.container}> <CustomTextInput value={inputValue} onChangeText={handleTextChange} placeholder="自定义，不起作用..." style={styles.textInput} /> <TextInput value={inputValue} onChangeText={handleTextChange} placeholder={"起作用了.."} style={styles.textInput} /> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f0f0f0', }, textInput: { width: '80%', height: 40, borderWidth: 1, borderColor: 'gray', padding: 10, }, }); export default App;