Question

我有一个<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>

Answer 1

首先你必须安装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()
    }

Answer 2

您可以在表格（或其行）上设置“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/

上的示例

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

ReactJS：如何删除Material-UI的<tablerow>上的行突出显示？

3 个答案: