React-Native：使用自定义 TextInput 组件添加文本限制指示器

Posted 2023-05-07

【中文标题】React-Native：使用自定义 TextInput 组件添加文本限制指示器

【英文标题】：React-Native: Adding text limit Indicator with a custom TextInput component

【发布时间】：2021-10-09 19:30:20

【问题描述】：

我想要完成的是一个 textInput，它在自身的一侧显示一个类似 (0/255) 的文本。

组件的最少代码：

    import React,  useState, useEffect from 'react';
    import  View, TextInput, Text  from 'react-native';
    
    export default function InputWithIndicator( Limit, ...otherProps ) 
      const [charRemains, setCharRemains] = useState(0);
      const [TextValues, setTextValues] = useState('');
      const [TextLimit] = useState(Limit);
    useEffect(() => 
          setCharRemains(Limit-TextValues.length);
    );
    
     return (
        <View >
          <TextInput ...otherProps onChangeText=value=>setTextValues(value)/>
          <Text>
            charRemains/TextLimit
          </Text>
        </View>
      );
    

在代码中放置组件：

<InputWithIndicator placeholder="Your name" maxLength=25 Limit=25 onChangeText=value=>setName(value) />

它作为组件显示效果很好。但主要问题是 onChangeText 根本不返回任何值。 有什么办法吗？仅供参考，我也尝试过 onChange 事件。

【问题讨论】：

其实你是在用复杂的方式做简单的任务，你可以看看我的回答。

【参考方案1】：

使用onChange 代替onChangeText

看看我的示例：Sample

【讨论】：

OP 告诉他们也尝试过onChangeprop

@RajendranNadar 是的，但我未能将值作为文本检索，因为它是排列的。他向我展示了正确的方法。

@michael-bahl，非常感谢。

【参考方案2】：

这是实时代码https://snack.expo.dev/@raajnadar/text-input-with-length-limit。

<View style=styles.container>
   <TextInput
     style=styles.input
     maxLength=TextLimit
     onChangeText=(value) => setText(value)
   />
   <Text>
     TextLimit - text.length/TextLimit
   </Text>
</View>

【讨论】：

我同意，但这不能作为一个组件工作，即 onChangeText 部分。我的应用程序中有 50 多个实例，因此必须有一个组件。顺便说一句，谢谢你的建议，我也参加了那部分......

可以，但是可以不使用useEffect直接在父组件上调用setState

我同意你的这一点，并告诉你我已经在我的组件中实现了这一点。