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

Question

Я создал таблицу, используя компонент таблицы 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}
   />   

Answer 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}
/>