如何在 React Native 中将 TextInput 与数组中未知长度的项目集中在一起？数组中可能有更多或更少的项目来自数据库

Posted 2023-04-18

【中文标题】如何在 React Native 中将 TextInput 与数组中未知长度的项目集中在一起？数组中可能有更多或更少的项目来自数据库

【英文标题】：How to focus TextInput with unknown length of items in an array in React Native? There may be more or less items in the array coming from the database

【发布时间】：2021-10-23 13:28:37

【问题描述】：

基本上我已经完成了对 TextInput 的关注，而项目可能被添加到购物车或来自数据库。我正在使用 useRef 挂钩，但是当我删除或添加某些项目时，我收到一些错误，指出当我在购物车中删除或添加一些项目时渲染更多而渲染更少。

这是有五个项目的 cartItems 数组。

[
    
        "isAddedToCart": true,
        "product_id": "1",
        "product_name": "PIN 36MM X 18IN",
        "quantity": 0,
        "unit": undefined
    ,
    
        "isAddedToCart": true,
        "product_id": "2",
        "product_name": "APIN 42MM X 24IN",
        "quantity": 0,
        "unit": undefined
    , 
        "isAddedToCart": true,
        "product_id": "3",
        "product_name": "PIN 24MM X 10IN",
        "quantity": 0,
        "unit": undefined
    , 
        "isAddedToCart": true,
        "product_id": "4",
        "product_name": "RAKAB 18MM X 24IN",
        "quantity": 0,
        "unit": "2"
    
]

这是我创建的辅助函数。

    export const inputRef = (cartItems) => 
    const inputRefs = []
    cartItems.map((item, index) => 
        if(index != (cartItems.length-1))
            inputRefs[index] = useRef(null);
                
    )

    return inputRefs;
    

这是我的文本输入

    <TextInput
    placeholder="Qty"
    placeholderTextColor="#676767"
    style=InputStyleWithoutBorder
    onChangeText=(quantity) => inputQuantity(item.product_id, quantity, defaultUnit.default)
    keyboardType="numeric"
    value=item.quantity
    returnKeyType=inputRefs.length == index ? "done" : "next"
    blurOnSubmit=inputRefs.length == index ? true : false
    ref=index == 0 ? null : inputRefs[index-1]
    onSubmitEditing=() =>  
            index == 0 || cartItems.length != index+1 ? inputRefs[index].current.focus() :null
            inputQuantity(item.product_id, item.quantity)
            
    
    />

在我从购物车中添加或删除一些商品之前，这一切正常。 对焦效果很好。

This is the item which can be deleted or can add later from the list of items

This is the error when I delete items in the cart

This is the error when I add items in the cart

【问题讨论】：

你能把代码粘贴到你定义你的钩子的地方吗？

这是 AddOrderScreen.js 链接ctxt.io/2/AACgu95HFA

这是 Helper.js 链接ctxt.io/2/AACgh5Z9Fg

另外，如果这不是好方法，请提及如何通过增加或减少 TextInput 的数量来关注动态文本输入。我正在等待解决方案。

【参考方案1】：

你能试试这个解决方案吗：

export const inputRef = (cartItems) => 
  const inputRefs = useRef([])
  inputRefs.current = cartItems.map((item, index) => 
     return inputRefs.current[i] ?? createRef(null);
  )

  return inputRefs;

【讨论】：

我在上面编辑了这个导出的解决方案 const inputRef = (cartItems) => const inputRefs = useRef([]) inputRefs.current = cartItems.map((item, index) => return inputRefs .current[index] ?? createRef(null); ) return inputRefs;并且它显示无法读取未定义的属性“当前”，下一个键现在也不起作用。

这工作正常 export const inputRef = (cartItems) => const inputRefs = [] cartItems.map((item, index) => if(index != (cartItems.length-1 )) inputRefs[index] = createRef(null); ) return inputRefs;

我只是在旧解决方案中使用 createRef，它工作正常，请解释一下它是如何工作的，我正在尝试理解解决方案。

createRef 总是会创建一个新的 ref，useRef 只会创建一个 ref 并且在每次进一步调用之后返回之前创建的 ref。

【参考方案2】：

export const inputRef = (cartItems) => 
    const inputRefs = []
    cartItems.map((item, index) => 
        if(index != (cartItems.length-1))
            inputRefs[index] = createRef(null);
                
    )
    return inputRefs;


This solution is working fine.

【讨论】：

请添加更多详细信息以扩展您的答案，例如工作代码或文档引用。