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

Question

除了单击单元格并且无法获取表格标题文本外，我的以下代码运行良好。根据代码，我可以很容易地抓取行文本。如果我在警报函数中使用 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 得到的响应。

任何建议将不胜感激。

Answer 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> ) 
...