登录  /  注册
React Native自定义TextInput不响应onChangeText事件
P粉743288436
P粉743288436 2023-09-21 22:59:27
[JavaScript讨论组]

我想在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粉743288436
P粉743288436

全部回复(2)
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 技术文章
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2023 https://www.php.cn/ All Rights Reserved | 苏州跃动光标网络科技有限公司 | 苏ICP备2020058653号-1

 | 本站CDN由 数掘科技 提供

登录PHP中文网,和优秀的人一起学习!
全站2000+教程免费学