ReactJS：如何删除 Material-UI 的 <Table> 的 <TableRow> 上的行突出显示？答案

【问题标题】：ReactJS: How to remove row highlight on <TableRow> of Material-UI's <Table>?ReactJS：如何删除 Material-UI 的 <Table> 的 <TableRow> 上的行突出显示？
【发布时间】：2016-10-18 19:29:58
【问题描述】：

我有一个<Table/> 和<TableRow>，在单击该行时，该行保持突出显示。我试过<TableRow disableTouchRipple={true}>，但没有运气。即使它已被点击，我如何才能删除它？

代码如下：

    <Table>
      <TableBody displayRowCheckbox={false}>
        <TableRow>
          <TableRowColumn>Row 1</TableRowColumn>
          <TableRowColumn>Content 1</TableRowColumn>
        </TableRow>
        <TableRow>
          <TableRowColumn>Row 2</TableRowColumn>
          <TableRowColumn>Content 2</TableRowColumn>
        </TableRow>
      </TableBody>
    </Table>

【问题讨论】：

您是否真的希望这些行可以通过复选框来选择，并且只应用所选行的 CSS，或者您只是想要一个没有可选行的普通表格？

标签： javascript css reactjs react-jsx material-ui

【解决方案1】：

您可以在表格（或其行）上设置“className”，然后将表格单元格的背景颜色设置为透明...

.table-no-highlight td {
  background-color: transparent !important;
}

<div id="container"></div>

const { Table, TableHeader, TableBody, TableRow, RaisedButton, TableRowColumn, TableHeaderColumn, MuiThemeProvider, getMuiTheme } = MaterialUI;

 class Example extends React.Component {
  render() {
    return (
      <Table className="table-no-highlight">
        <TableHeader>
          <TableRow>
            <TableHeaderColumn>ID</TableHeaderColumn>
            <TableHeaderColumn>Name</TableHeaderColumn>
            <TableHeaderColumn>Status</TableHeaderColumn>
          </TableRow>
        </TableHeader>
        <TableBody>
          <TableRow>
            <TableRowColumn>1</TableRowColumn>
            <TableRowColumn>John Smith</TableRowColumn>
            <TableRowColumn>Employed</TableRowColumn>
          </TableRow>
          <TableRow>
            <TableRowColumn>2</TableRowColumn>
            <TableRowColumn>Randal White</TableRowColumn>
            <TableRowColumn>Unemployed</TableRowColumn>
          </TableRow>
          <TableRow>
            <TableRowColumn>3</TableRowColumn>
            <TableRowColumn>Stephanie Sanders</TableRowColumn>
            <TableRowColumn>Employed</TableRowColumn>
          </TableRow>
          <TableRow>
            <TableRowColumn>4</TableRowColumn>
            <TableRowColumn>Steve Brown</TableRowColumn>
            <TableRowColumn>Employed</TableRowColumn>
          </TableRow>
        </TableBody>
      </Table>
    );
  }

}

const App = () => (
  <MuiThemeProvider muiTheme={getMuiTheme()}>
    <Example />
  </MuiThemeProvider>
);

ReactDOM.render(
  <App />,
  document.getElementById('container')
);

参见https://jsfiddle.net/mzt8pvtu/1/的示例

【讨论】：

这应该是答案。添加 jquery 只是为了做这样的事情是不必要的......而且......基于 jquery 的答案甚至没有回答问题！

【解决方案2】：

首先你必须安装 Jquery。

npm install jquery --save

然后你在组件中定义导入。

从'jquery'导入$；

用这样的 ID 识别表行：

<TableRow id={data.bookingNumber} key={data.bookingNumber}>

要删除行，你可以定义函数。

handleAllowDeleteBooking() {
      const { removeBooking, fetchBookingHistory, params, fetchBookingHistoryStore } = this.props      
      this.setState({
        showDeleteDailog: false
      })
      removeBooking(this.state.bookingId)
      $('#' + this.state.bookingId).remove()
    }

【讨论】：

这并不能解决问题（禁用突出显示）。它从 DOM 中删除行

【解决方案3】：

使用selectable 属性来禁用高亮，如下所示：

<Table selectable={false}>
  <TableBody displayRowCheckbox={false}>
    <TableRow>
      <TableRowColumn>Row 1</TableRowColumn>
      <TableRowColumn>Content 1</TableRowColumn>
    </TableRow>
    <TableRow>
      <TableRowColumn>Row 2</TableRowColumn>
      <TableRowColumn>Content 2</TableRowColumn>
    </TableRow>
  </TableBody>
</Table>

【讨论】：

他想禁用突出显示，而不是禁用选择，对吧？