es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo obtener el id de un componente después de hacer clic en él – react

27 Jul, 2023 Programación

Tengo una matriz de objetos en rides-context.js. En RidesList.js mapeo los datos de la matriz y los paso al componente para mostrarlos en la pantalla.

const RidesList = (props) => {
  const rideCtx = useContext(RidesContext);

  const deleteHandler = () => {
    rideCtx.onDelete(??)
  }

  return (
    <ul classname="{classes.container}">
      {rideCtx.ridesList.map((ride) => (
        <ride hour="{ride.hour}" name="{ride.name}" key="{ride.key}" id="{ride.id}" ondelete="{deleteHandler}/">
      ))}
    </ride></ul>
  );
};

Ahora quiero eliminar un componente después de hacer clic en él. Para hacerlo, tengo que pasar el id del componente a la función que se encuentra en rides-context.js. ¿Cómo puedo obtener el id del elemento en el que se ha hecho clic? (onDelete está conectado a onClick en otro archivo)

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para obtener la identificación del componente clicado, puedes pasarla como argumento a la función deleteHandler en RidesList.js:

    const RidesList = (props) => {
  const rideCtx = useContext(RidesContext);

  const deleteHandler = (id) => {
    rideCtx.onDelete(id);
  };

  return (
    <ul classname="{classes.container}">
      {rideCtx.ridesList.map((ride) => (
        <ride hour="{ride.hour}" name="{ride.name}" key="{ride.key}" id="{ride.id}" ondelete="{()" ==""> deleteHandler(ride.id)}
        />
      ))}
    </ride></ul>
  );
};

    Luego, en rides-context.js, puedes utilizar la id recibida para filtrar el array ridesList y eliminar el elemento correspondiente:

    const ridesReducer = (state, action) => {
  switch (action.type) {
    case "DELETE_RIDE":
      return {
        ...state,
        ridesList: state.ridesList.filter((ride) => ride.id !== action.payload),
      };
    default:
      return state;
  }
};

    En el ejemplo anterior, la acción DELETE_RIDE se envía con la id del elemento clicado como carga útil. La función filter elimina cualquier elemento cuya id coincida con la carga útil. Luego, el array ridesList se actualiza con el resultado filtrado.

Comments are closed.