Estoy usando ListItem de React Native Elements y he agregado una casilla de verificación :
{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> ))} Necesito poder presionar ListItem.CheckBox y cambiar el estado marcado, así como obtener el valor del objeto l asignado.
Sé cómo pasar un objeto l de una matriz asignada en la prensa a alguna función, pero no sé cómo devolver el valor checked={false} , y si es posible, hago más cosas con este elemento.
He leído mucho sobre referencias y casi todas son sobre componentes basados en clases y sobre la creación manual de referencias para elementos específicos. El problema aquí es que se trata de una matriz de elementos mapeados en la vista de lista, por lo que debe hacerse sobre la marcha.
Tenga en cuenta que los ejemplos de la documentación en la casilla de verificación no funcionan en componentes funcionales. Ejemplo: marcado={este.estado.marcado}
El objetivo de esto es poder seleccionar varios elementos de la lista y realizar algunas acciones en los objetos que están vinculados a ellos.
Cualquier sugerencia es apreciada.
reaccionar nativo: 0.63.2
Puede administrar todo el estado desde el componente principal mientras le da a cada componente secundario una referencia a setState (o una función que usa setState adentro). Puede enviar checked de cada objeto de la lista a cada componente secundario correspondiente como accesorio. De esta forma, como el estado se mantiene en el componente principal, cada cambio de estado se refleja en la interfaz de usuario. Componente de muestra:
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> ) } Entonces su onPress sería:
// 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)} PD: usar el índice para actualizar el estado no es una buena idea. Tener una id para cada objeto es una mejor práctica