Javascript ReactJS：如何删除<；上的行高亮显示；TableRow>；材料UI和x27的使用；s<；表>；？

我在里面有一个

和

，单击该行后，该行保持高亮显示。我试过

，但运气不好。即使已单击此突出显示，如何删除它

代码如下：

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

一排
内容1
第2排
内容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')
);

。表号高亮显示td{
背景色：透明！重要；
}
const{Table，TableHeader，TableBody，TableRow，RaisedButton，TableRowColumn，TableHeaderColumn，MuiThemeProvider，getMuiTheme}=MaterialUI；
类示例扩展了React.Component{
render（）{
返回(
身份证件
名称
地位
1.
约翰·史密斯
雇佣
2.
兰德尔·怀特
失业的
3.
斯蒂芬妮·桑德斯
雇佣
4.
史蒂夫·布朗
雇佣
);
}
}
常量应用=（）=>(
);
ReactDOM.render(
使用道具禁用高亮显示，如下所示：

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


一排
内容1
第2排
内容2
首先必须安装Jquery

npm安装jquery--保存

然后在组件中定义导入

从“jquery”导入美元

标识ID如下的表行：

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

您真的希望行可以通过复选框进行选择，并且只应用选定行的CSS，还是只希望一个没有可选择行的普通表？这应该是答案。添加jquery只是为了做类似的事情是不必要的…而且…基于jquery的答案甚至没有回答问题！这没有必要解决问题（禁用突出显示）。它从DOM中删除行。他想禁用突出显示，而不是禁用选择，对吗？
handleAllowDeleteBooking() {
      const { removeBooking, fetchBookingHistory, params, fetchBookingHistoryStore } = this.props      
      this.setState({
        showDeleteDailog: false
      })
      removeBooking(this.state.bookingId)
      $('#' + this.state.bookingId).remove()
    }