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

Question

我正在使用来自 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 对象从印刷机上的映射数组传递给某个函数，但不知道如何将 return 值传递给 checked={false}，如果可能的话用这个元素做更多的事情。

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

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

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

不胜感激。

本机反应：0.63.2

Answer 1

您可以管理父组件的所有状态，同时为每个子组件提供对 setState（或内部使用 setState 的函数）的引用。您可以将列表中每个对象的 checked 作为 prop 发送到每个相应的子组件。这样，由于状态保存在父组件中，每个状态变化都会反映在 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)}

P.S。使用索引来更新状态不是一个好主意。每个对象都有一个 id 是更好的做法

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

Create referece to items in list view on fly in functional component React native

javascript

reactjs

react-native

reference

ref