我想通过bootstrap react table2

问题描述

[！[在此处输入图片描述] [1]] [1]我使用表格中的编辑图标重定向页面，然后编辑数据。但是我尝试通过传递Nomovi_LocationId来重定向页面，我考虑了该表的ID，但是我不知道如何通过ID进行重定向。表名作为位置，所有数据都在这里。

get api中包含以下数据结构

[
    {
        Nomovi_LocationId: "92f05a02-956a-4adf-8dba-16d2161e0deb",LocationName: "athens",Delete_Flag: 1,Created: "2020-02-21T20:34:19.337",CreatedBy: null,Modified: "2020-02-21T20:34:19.337",ModifiedBy: null,},];

var userid = "8f0d0f73-8d52-468b-9844-16d30d303f57";
var sessionid = "5d90bc03-d7b3-4bbb-974e-e379c52b147a";

class LocationInventory extends Component {
    constructor(props) {
        super(props);
        this.state = {
            location: [],};
    }

    componentDidMount() {
        var getLocationapi =
            "https://nomovi365-api.azurewebsites.net/api/" +
            "Location" +
            "/" +
            userid +
            "/" +
            sessionid;
        fetch(getLocationapi,{
            method: "GET",})
            .then((response) => response.json())
            .then((location) => {
                this.setState({ location: location });
            });
    }

    editRow(e,Nomovi_LocationId) {
        window.location.href = "EditLocation?LocationId=" + Nomovi_LocationId + "/";
        e.stopPropagation();
    }

    render() {
        const locations = [
            {
                classes: "custom-cell",formatter: (cell) => {
                    return (
                        <div>
                            <FontAwesomeIcon
                                icon={faPen}
                                className="edit-button"
                                onClick={this.editRow}
                            />
                        </div>
                    );
                },headerStyle: (colum,colIndex) => {
                    return { width: "60px" };
                },tdStyle: { whiteSpace: "normal",wordWrap: "break-word" },{
                classes: "custom-cell",formatter: (cell) => {
                    return (
                        <FontAwesomeIcon
                            icon={faTrashAlt}
                            className="delete-button"
                            onClick={this.deleteRow}
                        />
                    );
                },{
                datafield: "LocationName",text: "Location Name",colIndex) => {
                    return { width: "300px" };
                },{
                datafield: "Created",text: "Created",formatter: (cell) => {
                    if (!cell) {
                        return "";
                    }
                    return `${
                        moment(cell).format("DD-MM-YYY")
                            ? moment(cell).format("MM/DD/YYYY")
                            : moment(cell).format("MM/DD/YYYY")
                    }`;
                },{
                datafield: "CreatedBy",text: "CreatedBy",{
                datafield: "Modified",text: "Modified",{
                datafield: "ModifiedBy",text: "ModifiedBy",];

        return (
            <div>
                <BootstrapTable
                    keyField="Nomovi_LocationId"
                    data={this.state.location}
                    columns={locations}
                    wrapperClasses="table-responsive"
                />
            </div>
        );
    }
}

解决方法

请检查此https://material-ui.com/components/tables/。只需按照以上链接中所述映射服务器的响应即可。并将此行添加到您的TableCell

<TableCell align="right"> <button onClick={() => this.editRow(this.state.location.Nomovi_LocationId)}>Edit</button> </TableCell>

然后将您的editRow函数更改为此editRow(Nomovi_LocationId)。现在，您将每一行的ID传递给editRow函数，该函数将与ID一起重定向到编辑页面。我希望这应该起作用。

此外，您也可以不使用任何组件来执行此操作。查看下面的示例代码。

var userid = "8f0d0f73-8d52-468b-9844-16d30d303f57";
var sessionid = "5d90bc03-d7b3-4bbb-974e-e379c52b147a";

class LocationInventory extends Component {
    constructor(props) {
        super(props);
        this.state = {
            location: [],};
    }

render(){
return(
<table className='table'>
   <thead>
      <tr>
          <th>
              //Your table Heading goes here
          </th>
      </tr>
      <tbody>
          { this.state.location.map((data,index) => {
              <tr> 
                    <td><button onClick={() => this.editRow(this.state.location.Nomovi_LocationId)}>Edit</button></td>
             
                    <td>data.LocationName</td>
                    <td>rest of your table data goes here .....</td>
               </tr>
           })}
       </tbody>
   </thead>
</table>
)
}
}

尝试一下，看看...让我知道它是否有效。