reactjs - 反应语义 ui table.row 设置行激活 onclick

Question

如何在单击 Table.Row React 语义 UI 时设置带有 prop active={true} 的行

听起来很简单，但我没有找到方法。在文档中，我没有发现任何内容。

我试过这种方法，但没有奏效，

      selectRow(key){
         let rowStatus = this.state.rowStatus[];
         for(let i in rowStatus){
           rowStatus[i] = false;
         }

         rowStatus[key] = true;
         this.setState({rowStatus:rowStatus});

      }

      renderRowTable(data){
        let row = [];
        let rowStatus = [];

        for(let i in data){

          rowStatus.push(false);

          row.push(
            <Table.Row key={i} active={this.state.rowStatus[i]} onClick={()=>{this.selectRow(i)}}>
              <Table.Cell title={data[i].code}>{data[i].code}</Table.Cell>
              <Table.Cell title={data[i].date}>{data[i].date}</Table.Cell>
            </Table.Row>
          );
        }

        this.setState({
          row:row,
          rowStatus:rowStatus
        });

      }

  render() {

    return (
      <div>
       <Table celled fixed singleLine compact size="small" sortable selectable>
            <Table.Header>
              <Table.Row>
                <Table.HeaderCell>Code</Table.HeaderCell>
                <Table.HeaderCell>Date</Table.HeaderCell>
              </Table.Row>
           </Table.Header>
           <Table.Body>{this.state.row}</Table.Body>
      </div>
    )
  }

标签： reactjssemantic-uisemantic-ui-react

Answer 1

您可以将 activeRowId 保持在状态，并在 onClick 行上更改其值。在循环行时，如果项目的 id 等于 activeRowId，则可以将 active 属性设置为 true。

我像这样大量重构了您的代码：

import React, { Component } from "react";
import { Table } from "semantic-ui-react";

class App extends Component {
  state = {
    data: [
      { id: 1, code: "code1", date: "date1" },
      { id: 2, code: "code2", date: "date2" },
      { id: 3, code: "code3", date: "date3" }
    ],
    activeRowId: null
  };

  setActiveRow(id) {
    this.setState({
      activeRowId: id
    });
  }

  renderRowTable() {
    let rows = this.state.data.map(item => {
      return (
        <Table.Row
          key={item.id}
          active={item.id === this.state.activeRowId}
          onClick={() => {
            this.setActiveRow(item.id);
          }}
        >
          <Table.Cell title={item.code}>{item.code}</Table.Cell>
          <Table.Cell title={item.date}>{item.date}</Table.Cell>
        </Table.Row>
      );
    });

    return rows;
  }

  render() {
    return (
      <div>
        <Table celled fixed singleLine compact size="small" sortable selectable>
          <Table.Header>
            <Table.Row>
              <Table.HeaderCell>Code</Table.HeaderCell>
              <Table.HeaderCell>Date</Table.HeaderCell>
            </Table.Row>
          </Table.Header>
          <Table.Body>{this.renderRowTable()}</Table.Body>
        </Table>
      </div>
    );
  }
}

export default App;

代码沙盒