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

【问题标题】：React-Native: Adding text limit Indicator with a custom TextInput componentReact-Native：使用自定义 TextInput 组件添加文本限制指示器
【发布时间】：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 事件。

【问题讨论】：

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

标签： react-native expo react-native-textinput

【解决方案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
我同意你的这一点，并告诉你我已经在我的组件中实现了这一点。