OnMouseEnter в ячейке таблицы antd

Я создал таблицу, используя компонент таблицы antd.

   const dataSource = [{
        key: '1',
        value1: 4,
        value2: 19,
        value3: 12
    },{
        key: '2',
        value1: 5,
        value2: 9,
        value3: 2
    },{
        key: '3',
        value1: 14,
        value2: 39,
        value3: 24
    }];

    const columns = [{
        title: 'Title One',
        dataIndex: 'value1',
        key: 'value1'
    },{
        title: 'Title Two',
        dataIndex: 'value2',
        key: 'value2'
    },{
        title: 'Title Three',
        dataIndex: 'value3',
        key: 'value3'
    }];

   <Table
       dataSource = {dataSource}
       columns = {columns}
   />

И теперь мне нужно изменить значение определенной ячейки для определенного текста, когда курсор проходит над ней.

Например, значение 4 первой ячейки текстом «Пример текста».

А при удалении курса вернитесь к предыдущему значению.

Было бы что-то подобное?

   <Table
       onRow = {(e) => {
         return {onMouseEnter: () => {.....}};}}
       dataSource = {dataSource}
       columns = {columns}
   />

Вам нужно заменить значение 4 или отобразить всплывающую подсказку, например, «Пример текста» при наведении курсора мыши?

— 14.12.2018 12:15

Мне нужно отображать всплывающую подсказку, например "Пример текста", когда мышь проходит над

— 14.12.2018 12:15

проверь это один раз stackblitz.com/edit/react-ypejma, это тебе нужно?

— 14.12.2018 12:21

Да, думаю, это может мне помочь. Хотя, думаю, лучше бы текст поменять на другой при наведении курсора мыши. Спасибо за вашу помощь!!

— 14.12.2018 12:27

вместо всплывающей подсказки нужно заменить значение «4»?

— 14.12.2018 12:30

Мне нужно, чтобы при наведении указателя мыши на ячейку я изменял значение «4» на «Пример текста», а когда курсор не наведен, возвращается значение «4».

— 14.12.2018 12:36

javascript reactjs antd

14.12.2018 11:57

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

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

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

2 227

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Вы можете создать другой компонент и добавить к нему события onMouseEnter и onMouseLeave, например:

import React, { Component } from "react";

export default class Cell extends Component {
  state = {
    hover: false
  };
  handleMouseEnter = () => {
    this.setState({ hover: !this.state.hover });
  };
  handleMouseLeave = () => {
    this.setState({ hover: !this.state.hover });
  };

  render() {
    return (
      <div
        onMouseEnter = {this.handleMouseEnter}
        onMouseLeave = {this.handleMouseLeave}
      >
        {this.state.hover ? this.props.hoverText : this.props.text}
      </div>
    );
  }
}

а затем используйте этот компонент в строке внутри:

const dataSource = [{
  key: '1',
  value1: <Cell text = "4" hoverText = "Example Text" />,
  value2: <Cell text = "19" hoverText = "Example Text" />,
  value3: <Cell text = "12" hoverText = "Example Text" />
},
...
];

const columns = [{
  title: 'Title One',
  dataIndex: 'value1',
  key: 'value1'
},
...
];

<Table
 dataSource = {dataSource}
 columns = {columns}
/>

Это как раз то, что мне нужно, и он отлично работает. Вы сделали мой день. Спасибо!

— 14.12.2018 12:59

Рад помочь!

— 14.12.2018 13:01

14.12.2018 12:42