单击表格单元格时无法获取表格标题文本

Posted 2023-03-06

【中文标题】单击表格单元格时无法获取表格标题文本

【英文标题】：Cannot get table header text while clicking on table cell

【发布时间】：2020-09-08 02:20:18

【问题描述】：

除了单击单元格并且无法获取表格标题文本外，我的以下代码运行良好。根据代码，我可以很容易地抓取行文本。如果我在警报函数中使用 Object.keys(data) 来获取数据，这会给我所有的标题文本而不是相应的单元格。我正在使用 semantic-ui-react 表。

class NonProtectedFeatureBias extends Component 
    constructor(props)
        super(props);
        this.state =        
            staticPostData:
                dataset_id: 1
            ,
            tableData:,
        ;
    
    renderKeys (data) 
        return Object.keys(data).map(item => (<Table.HeaderCell>item</Table.HeaderCell>))
    
    renderValues (data) 
        const rows = 
        Object.values(data).forEach(col => 
          for (let [key, value] of Object.entries(col)) 
            rows[key] = rows[key] ? [...rows[key], value] : [value]
          
        )

        return Object.entries(rows).map(([item, values]) => (
          <Table.Row>
            <Table.Cell>item</Table.Cell>
               
                values.map(val => 
                    <Table.Cell 
                        className= val === 'Low' ? ('green-color') : val === 'High' ? ('red-color') : ('orange-color')  
                        selectable
                        onClick=()=>
                            alert(Object.keys(data) + " " + item);
                        
                        verticalAlign='middle'
                        > val
                    </Table.Cell> ) 
              
          </Table.Row>
        ))
    

    componentDidMount() 
        this.fetchData();
    
    fetchData()
        axios.post('http://localhost:5000/GetProxyTable', this.state.staticPostData)
         .then((response) =>
            this.setState(tableData:response.data)

        );
    
    render()
        return ( 
            <Container style=height:"250px", backgroundColor:"">
                <Table definition style=marginTop:"5px" key="mytb">
                    <Table.Header>
                        <Table.Row className="cell-with-no-padding">
                            <Table.HeaderCell className="cell-width-single" />
                            this.renderKeys(this.state.tableData)
                        </Table.Row>
                    </Table.Header>

                    <Table.Body>
                        this.renderValues(this.state.tableData)
                    </Table.Body>
                </Table>
            </Container>
        );
    

export default NonProtectedFeatureBias;

这是我从 API 得到的响应。

任何建议将不胜感激。

【参考方案1】：

Object.keys(data) 会给你所有的coulmns。只需使用索引来获取特定的列名

像这样

Object.keys(data)[index]

代码 sn-p

...
<Table.Cell>item</Table.Cell>
 
    values.map((val,index) => //<-------------- use the index
        <Table.Cell 
            className= val === 'Low' ? ('green-color') : val === 'High' ? ('red-color') : ('orange-color')  
            selectable
            onClick=()=>
                alert(Object.keys(data)[index] + " " + item); //<----- use the index
            
            verticalAlign='middle'
            > val
        </Table.Cell> ) 
...

【讨论】：

最简单的解决方案！像魅力一样工作：D谢谢