Реагируйте useState, чтобы изменить цвет не работает

Question

У меня есть карта страны (SVG), и я хочу выделить провинцию / штат, когда наведу на нее курсор, изменив ее цвет / заливку. Я реализовал это, но проблема в том, что onMouseEnter выделяет всю карту, а не только выбранное состояние. Я хочу передать идентификатор штата / провинции, чтобы выделить только этот штат. Как я могу добавить это к этому или в другом месте:

onMouseEnter={() => setColor("yellow")}

Функциональный компонент:

function ColorOnHover() {
const [color, setColor] = useState("#FFF8DC");
return (
<svg>
   <polygon
        id="Paris"
        fill={color}
        stroke="#010101"
        stroke-width="2"
        onMouseEnter={() => setColor("yellow")}
        onMouseOut={() => setColor("#FFF8DC")}
        stroke-miterlimit="10"
        points="1494.844,491.41 ...  />

 <polygon
        id="Azur"
        fill={color}
        stroke="#010101"
        stroke-width="2"
        stroke-miterlimit="10"
        points="638.381,931.285 .../>
  </svg>

  )

Answer 1

Решение с css: 1. Добавьте атрибут класса к svg

<svg className="country" ...>

Создание и импорт css file

svg.country> polygon {fill: # FFF8DC; } svg.country> polygon: hover {fill: yellow; }

Answer 2

Создайте переменную, которая в основном устанавливает цвет и передает его в компонент полигона. Также используйте onMouseLeave () вместо onMouseOut ().

....
const [color, setColor] = useState("#FFF8DC");

const styles = {
 color: color
};

<polygon
  id="Paris"  
  style={styles}
  onMouseEnter={() => setColor("yellow")}
  onMouseLeave={() => setColor("#FFF8DC")}
  ... 
/>

)

Answer 3

Если у вас нет полигона специально для столицы страны - вам нечего выделить. Пожалуйста, предоставьте более подробный c пример.

Также, вы можете решить проблему с чистым CSS: просто назначьте класс всем полигонам, которые необходимо выделить, и добавьте к ним стили: hover класс, который выделяет многоугольник так, как вы хотите.

...

UPD: тогда вы можете попытаться использовать setState, сохраняя идентификатор провинции и установить свойство заполнения в теге многоугольника в соответствии с current selectedId, что-то вроде этого:

const [selectedId, setSelectedId] = useState(null)

...

<polygon
  id="Paris"
  fill={selectedId === 'Paris" ? 'yellow' : ''}
  onMouseEnter={() => setSelectedId('Paris')}
  onMouseOut={() => setSelectedId(null)}
  ...
/>

Это явно, но вы могли бы начать с чего-то такого.

Вы также должны попробовать чистое решение CSS:

.highlightable:hover {
  fill: yellow;
}

<polygon
  id="Paris"
  class="highlightable"
 />