首页  >  问答  >  正文

React Native自定义TextInput不响应onChangeText事件

我想在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

P粉743288436P粉743288436394 天前641

全部回复(2)我来回复

  • P粉938936304

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

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

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

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

    回复
    0
  • P粉754473468

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

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

    回复
    0
  • 取消回复