Reactjs-如何导航编辑按钮以编辑带有 id 的表单

Question

我正在尝试对我的数据库进行 CRUD。 到目前为止，我已经成功地完成了 CR 和 D。我只剩下 U。所以在我的桌子上我有两个按钮，即编辑和删除。 我创建了一个编辑表单（部分）。 我面临的问题是，每当我点击编辑按钮时，它什么都不做。 但是，当我在搜索栏中手动输入带有 id 的 URL 时，它会成功导航到编辑表单。

这是我的代码：

应用程序.js：

import "bootstrap/dist/css/bootstrap.min.css";
import React /*useState*/ from "react";
import { BrowserRouter, Switch, Route, Link } from "react-router-dom";
import "./App.css";
//import axios from "axios";
import CompanyMaster_Enter from "./components/companymaster_enter";
import Login from "./components/login_component";
import Register from "./components/register_component";
import Home from "./components/home_component";
import CustomerMaster_Enter from "./components/customermaster_enter";
import ParamMaster_Enter from "./components/parammaster_enter";
import TrnType_Enter from "./components/trntype_enter";
import TotalRights_Enter from "./components/totalrightsmst_enter";
import TicketMaster_Enter from "./components/ticketmaster_enter";
import AllCompanies from "./components/companymstlist";
import AllCustomers from "./components/customermstlist";
import AllParam from "./components/parammstlist";
import AllTickets from "./components/ticketmstlist";
import AllTotalRights from "./components/totalrightsmstlist";
import AllTrnTypes from "./components/trntypelist";
import AllUsers from "./components/usermstlist";
import AllUsersRights from "./components/userrightsmstlist";
import notfound from "./components/default";
import CompanyMaster_Edit from "./components/editcompany";

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <nav className="navbar navbar-expand navbar-light fixed-top">
          <ul class="nav">
            <li class="nav-item">
              <Link to={"/"} class="nav-link active" aria-current="page">
                Home
              </Link>
            </li>
            <li class="nav-item">
              <Link to={"/register"} class="nav-link">
                Register
              </Link>
            </li>
            <li class="nav-item">
              <Link to={"/login"} class="nav-link">
                Login
              </Link>
            </li>
            <li class="nav-item">
              <Link
                to={"/admin"}
                class="nav-link disabled"
                tabindex="-1"
                aria-disabled="true"
              >
                Admin
              </Link>
            </li>
          </ul>
        </nav>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/cpmenter" component={CompanyMaster_Enter} />
          <Route exact path="/login" component={Login} />
          <Route exact path="/register" component={Register} />
          <Route exact path="/ctmenter" component={CustomerMaster_Enter} />
          <Route exact path="/prmenter" component={ParamMaster_Enter} />
          <Route exact path="/trnenter" component={TrnType_Enter} />
          <Route exact path="/trmenter" component={TotalRights_Enter} />
          <Route exact path="/tcmenter" component={TicketMaster_Enter} />
          <Route exact path="/companymst" component={AllCompanies} />
          <Route exact path="/customermst" component={AllCustomers} />
          <Route exact path="/parammst" component={AllParam} />
          <Route exact path="/ticketmst" component={AllTickets} />
          <Route exact path="/trmst" component={AllTotalRights} />
          <Route exact path="/trntype" component={AllTrnTypes} />
          <Route exact path="/usermst" component={AllUsers} />
          <Route exact path="/userrightsmst" component={AllUsersRights} />
          <Route
            exact
            path="/upcompanymaster/:CmpnyCode"
            component={CompanyMaster_Edit}
          />
          <Route component={notfound} />
        </Switch>
      </div>
    </BrowserRouter>
  );
}

export default App;

Companymstlist.js（以表格形式列出所有公司）：

import { useEffect, useState } from "react";
import { Button, Container, Row, Table } from "react-bootstrap";
import axios from "axios";
import { Link } from "react-router-dom";

const AllCompanies = () => {
  const [companies, setCompanies] = useState([]);

  useEffect(() => {
    axios.get("http://localhost:8000/companymst").then((response) => {
      setCompanies(response.data);
    });
  }, []);

  const deleteRecord = (CmpnyCode) => {
    axios.delete(`http://localhost:8000/deletecompanymst/${CmpnyCode}`);
  };

  return (
    <div className="App">
      <div className="auth-wrapper">
        <div className="auth-inner">
          <Container className="container">
            <Row className="row">
              <Table striped bordered hover size="sm">
                <thead>
                  <tr>
                    <th>CompanyCode</th>
                    <th>CompanyName</th>
                    <th>Address1</th>
                    <th>Address2</th>
                    <th>PoBox</th>
                    <th>City</th>
                    <th>Province</th>
                    <th>Country</th>
                    <th>Phone</th>
                    <th>Fax</th>
                    <th>Email</th>
                    <th>RegistrationNo</th>
                    <th>VatNo</th>
                    <th>PinNo</th>
                    <th>BranchNo</th>
                    <th>BranchHq</th>
                    <th>StartDate</th>
                    <th>EndDate</th>
                    <th>Current</th>
                    <th>RunDate</th>
                    <th>DateCreated</th>
                    <th>UserID</th>
                    <th>LocationID</th>
                    <th colSpan="2">Actions</th>
                  </tr>
                </thead>
                <tbody>
                  {companies.map((val) => {
                    return (
                      <tr>
                        <td>{val.CmpnyCode}</td>
                        <td>{val.CmpnyName}</td>
                        <td>{val.Address1}</td>
                        <td>{val.Address2}</td>
                        <td>{val.PoBox}</td>
                        <td>{val.City}</td>
                        <td>{val.Province}</td>
                        <td>{val.Country}</td>
                        <td>{val.Phone}</td>
                        <td>{val.Fax}</td>
                        <td>{val.Email}</td>
                        <td>{val.RegistrationNo}</td>
                        <td>{val.VatNo}</td>
                        <td>{val.PinNo}</td>
                        <td>{val.BranchNo}</td>
                        <td>{val.BranchHq}</td>
                        <td>{val.StartDate}</td>
                        <td>{val.EndDate}</td>
                        <td>{val.Current.data[0]}</td>
                        <td>{val.RunDate}</td>
                        <td>{val.DateCreated}</td>
                        <td>{val.UserID}</td>
                        <td>{val.LocationID}</td>
                        <td>
                          <Button
                            variant="info"
                            component={Link}
                            to={`/upcompanymaster/${val.CmpnyCode}`}
                          >
                            Edit
                          </Button>
                        </td>
                        <td>
                          <Button
                            variant="danger"
                            onClick={() => {
                              deleteRecord(val.CmpnyCode);
                            }}
                          >
                            Delete
                          </Button>
                        </td>
                      </tr>
                    );
                  })}
                </tbody>
              </Table>
            </Row>
          </Container>
        </div>
      </div>
    </div>
  );
};

export default AllCompanies;

editcompany.js（编辑我想导航到的表单）：

import React, { useState } from "react";

const initialValues = {
  CompanyCode: "",
  CompanyName: "",
  Address1: "",
  Address2: "",
  PoBox: "",
  City: "",
  Province: "",
  Country: "",
  Phone: "",
  Fax: "",
  Email: "",
  RegistrationNo: "",
  VatNo: "",
  PinNo: "",
  BranchNo: "",
  BranchHq: "",
  StartDate: "",
  EndDate: "",
  Current: "",
  RunDate: "",
  DateCreated: "",
  UserID: "",
  LocationID: "",
};

const CompanyMaster_Edit = () => {
  const [company, setCompany] = useState(initialValues);
  const {
    CompanyCode,
    CompanyName,
    Address1,
    Address2,
    PoBox,
    City,
    Province,
    Country,
    Phone,
    Fax,
    Email,
    RegistrationNo,
    VatNo,
    PinNo,
    BranchNo,
    BranchHq,
    StartDate,
    EndDate,
    Current,
    RunDate,
    DateCreated,
    UserID,
    LocationID,
  } = company;

  const onValueChange = (e) => {
    setCompany({ ...company, [e.target.CompanyCode]: e.target.value });
  };

  
  return (
    <div className="App">
      <div className="auth-wrapper">
        <div className="auth-inner">
          <form>
            <h3> Edit Company Master</h3>
            <div className="form-class8">
              <div className="form-group">
                <label>Company Code</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="CompanyCode"
                  onChange={(e) => onValueChange(e)}
                  name="CompanyCode"
                  value={CompanyCode}
                />
              </div>

              <div className="form-group">
                <label>Company Name</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="CompanyName"
                  onChange={(e) => onValueChange(e)}
                  name="CompanyName"
                  value={CompanyName}
                />
              </div>

              <div className="form-group">
                <label>Address1</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="Address1"
                  onChange={(e) => onValueChange(e)}
                  name="Address1"
                  value={Address1}
                />
              </div>

              <div className="form-group">
                <label>Address2</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="Address2"
                  onChange={(e) => onValueChange(e)}
                  name="Address2"
                  value={Address2}
                />
              </div>

              <div className="form-group">
                <label>PO Box</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="PO Box"
                  onChange={(e) => onValueChange(e)}
                  name="PoBox"
                  value={PoBox}
                />
              </div>

              <div className="form-group">
                <label>City</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="City"
                  onChange={(e) => onValueChange(e)}
                  name="City"
                  value={City}
                />
              </div>

              <div className="form-group">
                <label>Province</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="Province"
                  onChange={(e) => onValueChange(e)}
                  name="Province"
                  value={Province}
                />
              </div>

              <div className="form-group">
                <label>Country</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="Country"
                  onChange={(e) => onValueChange(e)}
                  name="Country"
                  value={Country}
                />
              </div>
            </div>

            <div className="form-class8">
              <div className="form-group">
                <label>Phone</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="Phone"
                  onChange={(e) => onValueChange(e)}
                  name="Phone"
                  value={Phone}
                />
              </div>

              <div className="form-group">
                <label>Fax</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="Fax"
                  onChange={(e) => onValueChange(e)}
                  name="Fax"
                  value={Fax}
                />
              </div>

              <div className="form-group">
                <label>Email</label>
                <input
                  type="email"
                  className="form-control"
                  placeholder="Email"
                  onChange={(e) => onValueChange(e)}
                  name="Email"
                  value={Email}
                />
              </div>

              <div className="form-group">
                <label>Registration No</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="RegistrationNo"
                  onChange={(e) => onValueChange(e)}
                  name="RegistrationNo"
                  value={RegistrationNo}
                />
              </div>

              <div className="form-group">
                <label>VAT No</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="VAT No"
                  onChange={(e) => onValueChange(e)}
                  name="VatNo"
                  value={VatNo}
                />
              </div>

              <div className="form-group">
                <label>Pin No</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="Pin No"
                  onChange={(e) => onValueChange(e)}
                  name="PinNo"
                  value={PinNo}
                />
              </div>

              <div className="form-group">
                <label>Branch No</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="Branch No"
                  onChange={(e) => onValueChange(e)}
                  name="BranchNo"
                  value={BranchNo}
                />
              </div>

              <div className="form-group">
                <label>Branch Hq</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="Branch Hq"
                  onChange={(e) => onValueChange(e)}
                  name="BranchHq"
                  value={BranchHq}
                />
              </div>
            </div>

            <div className="form-class8">
              <div className="form-group">
                <label>Start Date</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="Start Date"
                  onChange={(e) => onValueChange(e)}
                  name="StartDate"
                  value={StartDate}
                />
              </div>

              <div className="form-group">
                <label>End Date</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="End Date"
                  onChange={(e) => onValueChange(e)}
                  name="EndDate"
                  value={EndDate}
                />
              </div>

              <div className="form-group">
                <label>Current</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="Current"
                  onChange={(e) => onValueChange(e)}
                  name="Current"
                  value={Current}
                />
              </div>

              <div className="form-group">
                <label>Run Date</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="Run Date"
                  onChange={(e) => onValueChange(e)}
                  name="RunDate"
                  value={RunDate}
                />
              </div>

              <div className="form-group">
                <label>Date Created</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="Date Created"
                  onChange={(e) => onValueChange(e)}
                  name="DateCreated"
                  value={DateCreated}
                />
              </div>

              <div className="form-group">
                <label>User ID</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="User ID"
                  onChange={(e) => onValueChange(e)}
                  name="UserID"
                  value={UserID}
                />
              </div>

              <div className="form-group">
                <label>Location ID</label>
                <input
                  type="text"
                  className="form-control"
                  placeholder="Location ID"
                  onChange={(e) => onValueChange(e)}
                  name="LocationID"
                  value={LocationID}
                />
              </div>
            </div>

            <button className="btn btn-primary btn-block">Edit</button>
          </form>
        </div>
      </div>
    </div>
  );
};

export default CompanyMaster_Edit;

Answer 1

您应该使用路由器属性而不是使用按钮重定向。

单击编辑按钮时，您应该调用这样的函数，fe

props.history.push('/yourLink', {
  prop1: '',
  prop2: ''...
});

并且您需要使用withRouter函数包装要从中重定向的组件，您可以从react-router-dom导入withRouter函数，例如export default withRouter(AllCompanies);

所以基本上你的代码应该是这样的

<Button onClick={() => handleEditButtonClick(val)}>
  Edit
</Button>

handleEditButtonClick = (val) => props.history.push(`/upcompanymaster/${val.CmpnyCode}`)

您还可以在这里找到多种方法

Answer 2

react-bootstrap 没有to道具。 它有一个href ： https : //react-bootstrap.netlify.app/components/buttons/#button-props 。 但是当您使用 React Router 时，您需要使用<Link to={yourEditLink}/>或这里的其他解决方案： https : <Link to={yourEditLink}/> bootstrap-button-with-react-router-57d2f6197588