在功能组件 React native 中动态创建对列表视图中项目的引用

Posted 2023-02-21

【中文标题】在功能组件 React native 中动态创建对列表视图中项目的引用

【英文标题】：Create referece to items in list view on fly in functional component React native

【发布时间】：2021-11-29 08:05:19

【问题描述】：

我正在使用 ListItem React Native Elements and have added a cheakbox:

items.map((l, i) => (
    <ListItem.Swipeable
      key=i
      <ListItem.CheckBox
        iconType='material'
        checkedIcon='clear'
        uncheckedIcon='add'
        checkedColor='red'
        checked=false
        //onPress=something Need to write (call here) function here that will change checked state and do other stuff
      />
      <ListItem.Content>
        <ListItem.Title>
          l.time
        </ListItem.Title>
      </ListItem.Content>
      <ListItem.Chevron />
    </ListItem.Swipeable>
  ))

我需要能够按下 ListItem.CheckBox 并更改选中状态以及获取映射的 l 对象的值。

我知道如何将一个l 对象从印刷机上的映射数组传递给某个函数，但不知道如何将值返回给checked=false，以及是否可以用这个元素做更多的事情。

我已经阅读了很多关于 refs 的内容，几乎所有内容都是关于基于类的组件以及关于为特定元素手动创建 refs 的。这里的问题是这是一个映射到 listview 的元素数组，所以这需要在 flay 上完成。

请记住，复选框文档中的示例不适用于功能组件。 示例：checked=this.state.checked

这样做的目的是能够从列表中选择多个项目并对与之相关的对象执行一些操作。

任何指针表示赞赏。

反应原生：0.63.2

【参考方案1】：

您可以管理父组件的所有状态，同时为每个子组件提供对setState 的引用（或在内部使用setState 的函数）。您可以将列表中每个对象的checked 作为道具发送给每个对应的子组件。这样，由于状态保留在父组件中，每个状态更改都会反映在 UI 上。 示例组件：

import  useState  from 'react'

const DEFAULT_ITEMS = [
   id: "id_akdjk", label: "quora", checked: false ,
   id: "id_xlhwi", label: "library", checked: false ,
   id: "id_xoqix", label: "reddit", checked: true 
]


const ListItem = ( label, checked, change ) => 
  return(
  <div>
    <input type="checkbox" onChange=change checked=checked/>
    <label htmlFor="vehicle1">label</label><br/>
  </div>
  )


export default function Component() 
  const [items, setItems] = useState(DEFAULT_ITEMS)

  const handleInputChange = (index) => 
    // manipulate copy of state. (not state itself)
    const copyState = [...items]

    // updating that specific indice
    copyState.splice(index,
                         1,
                         ...items[index], checked: !items[index]["checked"])
    setItems(copyState)
  

  return (
    <div>
       items.map((el, i) => 
        return <ListItem 
                  key=i
                  label=el.label
                  checked=el.checked
                  change=() => handleInputChange(i)/>
      )

      <div>
        <p>You chose:</p>  items.map((el) => el.checked ? el.label : '').join(' ') 
      </div>
    </div>
  )

所以你的onPress 将是：

// assuming you are using this data as the state
const DEFAULT_ITEMS = [
   id: "id_akdjk", checked: false ,
   id: "id_xlhwi", checked: false ,
   id: "id_xoqix", checked: false 
]

  ...
  const [items, setItems] = useState(DEFAULT_ITEMS)

  const handleInputChange = (index) => 
    // manipulate copy of state. (not state itself)
    const copyState = [...items]

    // updating that specific indice
    copyState.splice(index,
                         1,
                         ...items[index], checked: !items[index]["checked"])
    setItems(copyState)
  

  //...
  onPress=() => handleInputChange(i)

附：使用索引来更新状态不是一个好主意。为每个对象设置一个id 是一种更好的做法

【讨论】：

是的，我不能接受这个。我没有想到一个巧妙的技巧，我做的有点不同，但逻辑是一样的。谢谢你。

还要注意我希望有一个不需要修改我的对象的解决方案。我在应用程序中到处使用它们。仅出于列表的目的放置选中的属性有点矫枉过正。

如果你愿意，我可以更新我的答案，不使用 checked 作为布尔值。

代码不用全部写，有其他想法的可以在这里说。那也会使用状态，对吗？不是裁判？

正如我的导师建议的那样，参考解决方案不是一个好的选择。在您的情况下，您需要生成动态参考。你可以做到[***.com/questions/55995760/…，但我真的一点也不喜欢这个主意