React Native benutzerdefinierter TextInput reagiert nicht auf das Ereignis onChangeText

Question

Ich möchte einen CustomTextInput in React Native erstellen und verwenden. Ich habe es gemäß dem folgenden Code erstellt, aber die Eigenschaft onChangeText in CustomTextInput funktioniert nicht ordnungsgemäß.

Trotz umfangreicher Recherchen konnte ich die Ursache des Problems nicht herausfinden. Was könnte ich verpasst haben?

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;

Sie können auch hier nachschauen https://snack.expo.dev/@cemyeten/handling-text-input

Answer 1

如我所见，您在组件内部创建了一个组件并使用它。

但是，由于您在组件内部创建了一个功能组件，每次发生状态更新时它都会重新创建。

更好的选择是将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;

Answer 2

将您的组件放在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;