TextInput tersuai React Native tidak bertindak balas kepada acara onChangeText-Soal Jawab Rangkaian PHP Cina

Saya mahu mencipta dan menggunakan CustomTextInput dalam React Native. Saya telah menciptanya mengikut kod di bawah tetapi sifat onChangeText dalam CustomTextInput tidak berfungsi dengan betul.

Walaupun penyelidikan yang meluas, saya tidak dapat mengetahui punca masalah itu. Apa yang mungkin saya terlepas?

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 (  ); }; const handleTextChange = (text) => { setInputValue(text); }; return (     ); }; 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;

Anda juga boleh menyemak di sini https://snack.expo.dev/@cemyeten/handling-text-input

import React, { useState } from 'react'; import { View, StyleSheet } from 'react-native'; import { TextInput } from 'react-native'; const CustomTextInput = ({ value, onChangeText, placeholder, style }) => { return ( ); }; const App = () => { const [inputValue, setInputValue] = useState(''); const handleTextChange = (text) => { setInputValue(text); }; return ( ); }; 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;

import React, { useState } from 'react'; import { View, StyleSheet } from 'react-native'; import { TextInput } from 'react-native'; const CustomTextInput = ({ value, onChangeText, placeholder, style,...other }) => { return ( ); }; const App = () => { const [inputValue, setInputValue] = useState(''); const handleTextChange = (text) => { setInputValue(text); }; return ( ); }; 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;

membalas semua (2)

P粉9389363042023-09-22 17:15:23 Tingkat 2

Seperti yang saya lihat anda mencipta komponen di dalam komponen dan menggunakannya.

Walau bagaimanapun, memandangkan anda mencipta komponen berfungsi di dalam komponen, ia akan dicipta semula setiap kali kemas kini keadaan berlaku.

Pilihan yang lebih baik ialah mengalihkan CustomTextInput dari skrin atau mana-mana komponen yang mempunyai keadaan.

Contohnya:

Suka+0

Tambah Balasan

P粉7544734682023-09-22 14:40:33 Tingkat 1

Letakkan komponen anda dalam fungsiApp函数之外，或者更好的方法是为其创建一个单独的文件，因为如果您将其放在内部，当您编写文本useState hook重新渲染Appuntuk mencerminkannya pada UI, ini akan membuatkan komponen anda hilang fokus.

Kod tetap: