Javascript 在antd表格的单元格上输入OnMouseCenter

我已经使用AntdTable组件创建了一个表

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

const数据源=[{
键：“1”，
价值1:4，
价值2:19，
价值3:12
},{
键：“2”，
价值1:5，
价值2:9，
价值3:2
},{
键：“3”，
价值1:14，
价值2:39，
价值3:24
}];
常量列=[{
标题：“标题一”，
dataIndex:'value1'，
关键字：“value1”
},{
标题：“标题二”，
dataIndex:'value2'，
关键字：“value2”
},{
标题:"标题三",，
dataIndex:'value3'，
键：“值3”
}];

现在，当光标经过一个特定的单元格时，我需要改变它的值

例如，文本“example text”对应的第一个单元格的值4

删除课程后，返回到上一个值

会不会是类似的事情

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

{
返回{onMouseCenter:（）=>{….}；}
数据源={dataSource}
列={columns}
/>   

您可以创建另一个组件并向其中添加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>
    );
  }
}

import React，{Component}来自“React”；
导出默认类单元格扩展组件{
状态={
悬停：错误
};
HandleMouseCenter=（）=>{
this.setState（{hover:！this.state.hover}）；
};
handleMouseLeave=（）=>{
this.setState（{hover:！this.state.hover}）；
};
render（）{
返回(
{this.state.hover？this.props.hover文本：this.props.text}
);
}
}

然后在内部的一行中使用此组件：

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

const数据源=[{
键：“1”，
值1:，
值2:，
价值3：
},
...
];
常量列=[{
标题：“标题一”，
dataIndex:'value1'，
关键字：“value1”
},
...
];

当鼠标经过时，您需要替换值4或显示类似“示例文本”的工具提示？当鼠标经过时，我需要显示类似“示例文本”的工具提示。这是您需要的吗？是的，我认为这可以帮助我。尽管我认为当鼠标经过时，最好将文本换成另一个文本。谢谢你的帮助！！取而代之的是工具提示，您需要替换值“4”？这正是我所需要的，它工作得非常完美。你让我开心。非常感谢。我很乐意帮忙！