javascript - 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。

当您删除类(class)时，返回到之前的值。

有类似的东西吗？

   <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>
    );
  }
}

然后在Row里面使用这个组件:

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