reaccionarjs - Lectura de texto en chip

Tengo un chip Material UI donde quiero leer el texto que contiene cuando hago clic en ese chip. Mi código hasta ahora está a continuación:

<Chip
  label={name1}
  color="primary"
  variant="outlined"
  onMouseOver={(event) =>
    board.current.addMarker('e4', {
      class: 'emphasize',
      slice: 'marker3',
    })
  }
  onMouseLeave={(event) => board.current.removeMarkers(undefined, undefined)}
  onClick={(event) => alert(event.target.value)}
/>

Mi evento onClick no recoge el valor de las fichas. ¿En qué me equivoco?

------------------------------------

Simplemente puede agregar nombre1 a ese evento de clic y obtendrá el valor:

<Chip
  label={name1}
  color="primary"
  variant="outlined"
  onMouseOver={(event) =>
    board.current.addMarker('e4', {
      class: 'emphasize',
      slice: 'marker3',
    })
  }
  onMouseLeave={(event) => board.current.removeMarkers(undefined, undefined)}
  onClick={(event) => alert(name1)} // <-------- Add name here
/>

Supongo que estás recorriendo alguna matriz e imprimiendo estos chips. Así que simplemente agregue ese valor a la alerta en ese pasaje o en la declaración de componente individual.

3

Eso funcionó, ¡gracias! Todo parece muy sencillo en retrospectiva.

- Jon

19/03/2021 a las 16:22

Siempre es así :) Por cierto, siempre mire la referencia de API para cualquier biblioteca, pero para Material UI todos los componentes están cubiertos con sus accesorios y lo que le brindan para trabajar. Saludos

-Mario Petrovic

19/03/2021 a las 16:26

1

Sí, he estado haciendo eso. Buena sugerencia.

- Jon

20/03/2021 a las 15:14

------------------------------------

Este fue el método que mejor funcionó para mí.

<Chip onClick={getChipLabel} label={'Monday'} variant="outlined"  />
    
const getChipLabel = (e) => {console.log(e.currentTarget.innerText)}

Devoluciones "lunes"

------------------------------------

Se actualizó el ejemplo de los documentos de Material-UI https://material-ui.com/componets/chips/#chip-array

import React from 'react';
import {makeStyles} from '@material-ui/core/styles';
import Chip from '@material-ui/core/Chip';
import Paper from '@material-ui/core/Paper';

const useStyles = makeStyles((theme) => ({
    root: {
        display: 'flex',
        justifyContent: 'center',
        flexWrap: 'wrap',
        listStyle: 'none',
        padding: theme.spacing(0.5),
        margin: 0,
    },
    chip: {
        margin: theme.spacing(0.5),
    },
}));

export default function ChipsArray() {
    const classes = useStyles();
    const chipData = [
        {key: 0, label: 'Angular'},
        {key: 1, label: 'jQuery'},
        {key: 2, label: 'Polymer'},
        {key: 3, label: 'React'},
        {key: 4, label: 'Vue.js'},
    ];

    function onChipClick(name) {
        console.log("My name is", name);
    }

    return (
        <Paper component="ul" className={classes.root}>
            {chipData.map((data) => {
                return (
                    <li key={data.key}>
                        <Chip
                            color="primary"
                            variant="outlined"
                            label={data.label}
                            className={classes.chip}
                            onClick={() => onChipClick(data.label)}
                        />
                    </li>
                );
            })}
        </Paper>
    );
}

Respondido

19 de marzo de 2021 a las 16:24

Yana Trifonova

Yana Trifonova

606

1

1 insignia de oro

9

9 insignias de plata

29

29 insignias de bronce

0

------------------------------------

Todas las respuestas anteriores parten del hecho de tener acceso a los datos originales.

En caso de que no lo tengas (como pasar una serie de chips), simplemente usa:

chipObj.props.label