React Native Custom TextInput ne répond pas à l'événement onChangeText

Question

Je souhaite créer et utiliser un CustomTextInput dans React Native. Je l'ai créé selon le code ci-dessous mais la propriété onChangeText dans CustomTextInput ne fonctionne pas correctement.

Malgré des recherches approfondies, je n'ai pas pu trouver la cause du problème. Qu'est-ce que j'ai pu rater ?

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;

Vous pouvez également vérifier ici https://snack.expo.dev/@cemyeten/handling-text-input

Answer 1

Comme je vois, vous créez un composant à l'intérieur du composant et l'utilisez.

Cependant, puisque vous avez créé un composant fonctionnel à l'intérieur du composant, il sera recréé à chaque fois qu'une mise à jour d'état se produit.

Une meilleure option consiste à déplacer le CustomTextInput hors de l'écran ou de tout composant ayant un état.

Par exemple :

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

Placez votre composant dans une fonction App函数之外，或者更好的方法是为其创建一个单独的文件，因为如果您将其放在内部，当您编写文本useState hook重新渲染App pour le refléter sur l'interface utilisateur, cela fera perdre le focus à votre composant.

Code fixe :

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;