Событие React onClick не работает должным образом внутри цикла

Это мой код,

import "./styles.css";
import React from "react";

export default function App() {
  const categories = [
    { name: "aaa", slug: "aaa" },
    { name: "baa", slug: "baa" }
  ];

  const handleClick = (value) => {
    console.log(value);
  };
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <div>
        <ul>
          {categories.map((category) => (
            <li className="cat_item" key={category.slug}>
              <a
                value="value"
                onClick={(e) => handleClick(e.currentTarget.value)}
                className="dropdown-item"
              >
                {category.name}
                <span className="text-gray-25 font-size-12 font-weight-normal"></span>
              </a>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

Но когда я нажимаю отображаться как неопределенное вместо значения в журнале. Вот рабочий пример вопроса

используйте e.target.value вместо этого

A.Burdonskaya 23.04.2022 10:25

Спасибо. Пробовал, но все так же, к сожалению.

vimuth 23.04.2022 10:28
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
Как передать состояние или данные в react-router v6
Как передать состояние или данные в react-router v6
react-router - это лучшая библиотека для работы с маршрутизацией в reactjs. С помощью react-router вы передаете состояние или данные от одного...
0
2
33
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Это связано с тем, что целью является сам элемент привязки HTML и, следовательно, не имеет связанного с ним свойства значения. В вашем случае я предполагаю, что вы хотите получить текст внутри вашего элемента привязки, попробуйте вместо этого.

onClick={(e) => handleClick(e.target.textContent)}

И мы можем использовать это для пользовательских атрибутов,

onClick={(e) => handleClick(e.target.attributes.getNamedItem("value").value)}

Источник: здесь

вы попытались передать значение. Но здесь нет поля ввода, поэтому здесь не определено. Вы попытались передать содержимое innerText.

onClick={(e) => handleClick(e.currentTarget.innerText)}

Другие вопросы по теме