Imagina que estás trabajando en una aplicación de comercio electrónico, y tienes un componente. Este componente se utilizará para mostrar los artículos en el carrito del usuario.
123456789101112131415161718192021classCartextendsComponent{ state ={ items:[]};asynccomponentDidMount(){const items =JSON.parse(localStorage.getItem("cart"));this.setState({ items });}render(){return(<divclassName="cart"{this. state.items.map(item=={{[#]};(<divclassName="cart-item"};} spanclassName="item-name"};{item.name}</span>}botón(x</botón)}}</div>);}}jsx
Para eliminar un elemento cuando el usuario hace clic en el botón x, escribe una función de manejo de clic. Pero todavía tienes que averiguar cómo identificar qué elemento eliminar. Para ello, añade un atributo «data-remove» al elemento del botón que incluya el valor de identificación del elemento.
12345678// ...;divclassName="cart-item"// ...spanclassName="item-name"// {item.name}</span>;buttononClick={this.removeItem}data-remove={item.id}; x </button>/div>// ...jsx
Tengan en cuenta que «dataRemove» es un nombre válido para el atrezzo JSX; no hay necesidad de usar una caja de camello, como «dataRemove». Si cambias el nombre del atributo por «camel-case», JSX lo considerará como un «prop» en vez de un atributo personalizado en HTML.
Luego, en el método removeItem(), acceda al atributo como se muestra a continuación.
12345678910111213// ...removeItem=e=;{const removeId = e.target.dataset.remove;// lógica para eliminareconst{ items }=este.state;for(let i = items. length-1; i >=0;--i){if(items[i].id=== removeId) items.splice(i,1);}this.setState({ items });localStorage.setItem("cart",JSON.stringify(items));};// ...jsx
El atributo de objetivo del objeto de evento le dará el nodo DOM nativo. Luego puede utilizar cualquier DOM API para acceder a los atributos. El atributo del conjunto de datos puede no estar disponible en versiones anteriores de Internet Explorer. En ese caso, puedes usar el método getAttribute().
1const removeId = e.target.getAttribute("datos-quitar");jsx
El método getAttribute() devolverá el valor de la cadena del atributo especificado.
Alternativamente, también puedes acceder a los atributos usando el método getNamedItem().
1const removeId = e.target.attributes.getNamedItem("data-remove").value;jsx