Javascript 行单击react.js

这个组件react提供了一个具有自己行id的表，我想做的是在用户单击时用鼠标单击来选择行，如何在这个react应用程序中实现这一点？该表加载一系列值​​从使用reactstrap显示的后端，如何修复此问题

React.js代码：

class Static extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();

    this.state = {
      tableStyles: [
      ],

    };

    this.checkAll = this.checkAll.bind(this);
  }

  parseDate(date) {
    this.dateSet = date.toDateString().split(" ");

    return `${date.toLocaleString("en-us", { month: "long" })} ${
      this.dateSet[2]
    }, ${this.dateSet[3]}`;
  }

  checkAll(ev, checkbox) {
    const checkboxArr = new Array(this.state[checkbox].length).fill(
      ev.target.checked
    );
    this.setState({
      [checkbox]: checkboxArr,
    });
  }

  //Function create user
  async newuser(event){
    let ragionesocialetext = event.target.value;
    console.log("Ragione Sociale: "+ragionesocialetext);
  }

  //Function call con text change
  async handleChange(event) {
    let searchtext = event.target.value;
    var result=await ricercaclienti(searchtext);
    var results=[];
    for(var i=0; i<result.length; i++){
      var value={
        id: result[i].IdCliente,
        picture: require("../../../images/cliente.jpg"), // eslint-disable-line global-require
        description: result[i].RagioneSociale,
        info: {
          citta: result[i].Citta,
          provincia: result[i].Provincia,
        },
        DataInserimento: result[i].DataInserimento,
        Cap: result[i].Cap,
        progress: {
          percent: 30,
          colorClass: "warning",
        }
      };
      results.push(value);
    }
    this.setState({tableStyles: results});
  }


  render() {
    return (
      <div className={s.root}>
        <h2 className="page-title">
          Clienti - <span className="fw-semi-bold"> Anagrafia</span>
        </h2>
        <Row>
          <Col>

            <Widget

              settings
              close
              bodyClass={s.mainTableWidget}
            >
                <p></p>
                <p></p>
                <p></p>
                <p></p>

            <FormGroup >
            <InputGroup className="input-group-no-border">
              <InputGroupAddon addonType="prepend">
                <InputGroupText>
                  <i className="fa fa-search text-white" />
                </InputGroupText>
              </InputGroupAddon>
              <Input
                id="search-input"
                className="input-transparent"
                placeholder="Ricerca"
                type='text'
  name='ricerca'
  onChange={this.handleChange.bind(this)}
              />
            </InputGroup>
          </FormGroup>
              <Table striped>
                <thead>
                  <tr className="fs-sm">
                    <th className="hidden-sm-down">#</th>
                    <th>Cliente</th>
                    <th>Ragione Sociale</th>
                    <th className="hidden-sm-down">Indirizzo</th>
                    <th className="hidden-sm-down">Data Inserimento</th>
                    <th className="hidden-sm-down">CAP</th>
                    <th className="hidden-sm-down">Stato</th>
                  </tr>
                </thead>
                <tbody>
                  {this.state.tableStyles.map((row) => (
                    
                    <tr key={row.id}>
                      <td>{row.id}</td>
                      <td>
                        <img
                          className="img-rounded"
                          src={row.picture}
                          alt=""
                          height="50"
                        />
                      </td>
                      <td>
                        {row.description}
                        {row.label && (
                          <div>
                            <Badge color={row.label.colorClass}>
                              {row.label.text}
                            </Badge>
                          </div>
                        )}
                      </td>
                      <td>
                        <p className="mb-0">
                          <small>
                            Città:
                            <span className="text-muted fw-semi-bold">
                              &nbsp; {row.info.citta}
                            </span>
                          </small>
                        </p>
                        <p>
                          <small>
                            Provincia:
                            <span className="text-muted fw-semi-bold">
                              &nbsp; {row.info.provincia}
                            </span>
                          </small>
                        </p>
                      </td>
                      <td className="text-muted">{row.DataInserimento}</td>
                      <td className="text-muted">{row.Cap}</td>
                      <td className="width-150">
                        <Progress
                          color={row.progress.colorClass}
                          value={row.progress.percent+row.i}
                          className="progress-sm mb-xs"
                        />
                      </td>
                    </tr>
                  ))}
                </tbody>
              </Table>
              <div className="clearfix">
                <div className="float-right">
                  <Button color="default" className="mr-2" size="sm">
                    Refresh...
                  </Button>
                  <UncontrolledButtonDropdown>
                    <DropdownToggle
                      color="inverse"
                      className="mr-xs"
                      size="sm"
                      caret
                    >
                      Nuovo Cliente
                    </DropdownToggle>
                    <DropdownMenu>
                      <DropdownItem>Inserisci ragione sociale</DropdownItem>
                      <Input
                id="search-input"
                className="input-transparent"
                placeholder="ragionesociale"
                type='text'
  name='ragionesociale'
  onChange={this.newuser.bind(this)}
              />

                    </DropdownMenu>
                  </UncontrolledButtonDropdown>
                </div>
                <p></p>
              </div>
            </Widget>
          </Col>
        </Row>

                          </div>
    );
  }
}

类静态扩展React.Component{
建造师（道具）{
超级（道具）；
this.textInput=React.createRef（）；
此.state={
表样式：[
],
};
this.checkAll=this.checkAll.bind（this）；
}
日期（日期）{
this.dateSet=date.toDateString（）.split（“”）；
返回`${date.tolocalString（“en-us”，{month:'long}）}${
这个.日期集[2]
}，${this.dateSet[3]}`；
}
全部选中（ev，复选框）{
const checkboxArr=新数组（this.state[checkbox].length）.fill(
ev.target.checked
);
这是我的国家({
[复选框]：checkboxArr，
});
}
//函数创建用户
异步新用户（事件）{
让ragionesocialetext=event.target.value；
日志（“RagioneSociale:+ragionesocialetext”）；
}
//函数调用con文本更改
异步句柄更改（事件）{
让searchtext=event.target.value；
var结果=等待ricercaclienti（搜索文本）；
var结果=[]；
对于（var i=0；i(
{row.id}
{row.description}
{row.label&&(
{row.label.text}
)}

同上：
{row.info.citta}


省：
{row.info.provincia}

{row.DataInserimento}
{row.Cap}
))}
刷新
新客户
社会保险

);
}
}

您应该在您的状态中设置一个

selectedRowId

变量，然后添加

onClick={() => {this.setState({ selectedRowId: row.id })}}

支持用户单击以选择行的位置。如果要根据是否选中行来更改行的样式，可以通过添加

className={this.state.selectedRowId===row.id?'selected':'unselected'}

---

然后为选定的和未选定的类添加样式。

您可以绑定

上的单击事件，并在

上添加

数据属性，以便单击rowId用户。