正在处理Mern堆栈应用程序-更新操作

Question

import React from 'react';
import { Button, Table, Modal, Form, FormControl } from 'react-bootstrap';
import axios from 'axios';
import CompanyEditModal from './CompanyEditModal';

const Company = props => (
  <tr>
    <td>{props.company.companyName}</td>
    <td>{props.company.taxOffice}</td>
    <td>{props.company.taxNumber}</td>
    <td>{props.company.date}</td>
    <td>
      <Button
        variant="danger"
        onClick={() => props.onDelete(props.company._id)}
        style={{ marginRight: '20px' }}
      >
        Sil
      </Button>
      <Button variant="primary" onClick={() => ...... TO BE DONE}>
        Edit
      </Button>
    </td>
  </tr>
);

class Companies extends React.Component {
  state = {
    companies: [],
    companyName: '',
    taxOffice: '',
    taxNumber: '',
    companyId: '',
    show: false,
    searchTerm: ''
  };

  onChange_1 = e => {
    this.setState({
      companyName: e.target.value
    });
  };
  onChange_2 = e => {
    this.setState({
      taxOffice: e.target.value
    });
  };
  onChange_3 = e => {
    this.setState({
      taxNumber: e.target.value
    });
  };

  onSubmit = e => {
    e.preventDefault();

    const company = {
      companyName: this.state.companyName,
      taxOffice: this.state.taxOffice,
      taxNumber: this.state.taxNumber
    };

    console.log(company);

    axios.post('http://localhost:5000/companies/add', company).then(res => {
      console.log(res.data);
      window.location.reload();
    });

    this.setState({
      companyName: ''
    });
  };

  CompanyModal = () => {
    const handleClose = () => this.setState({ show: false });
    const handleShow = () => this.setState({ show: true });

    return (
      <>
        <Button variant="success" type="submit" onClick={handleShow}>
          + Firma Ekle
        </Button>

        <Modal show={this.state.show} onHide={handleClose}>
          <Modal.Header closeButton>
            <Modal.Title>Firma Ekle</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <Form onSubmit={this.onSubmit}>
              <Form.Label>Firma Adı:</Form.Label>
              <Form.Control
                placeholder="* Firma Adını Giriniz"
                onChange={this.onChange_1}
                value={this.state.companyName}
              />
              <Form.Text className="text-muted">* Girmek zorunludur.</Form.Text>
              <br />
              <Form.Label>Vergi Dairesi:</Form.Label>
              <Form.Control
                placeholder="Vergi Dairesini Giriniz"
                onChange={this.onChange_2}
                value={this.state.taxOffice}
              />
              <br />
              <Form.Label>Vergi Numarası:</Form.Label>
              <Form.Control
                placeholder="Vergi Numarasını Giriniz"
                onChange={this.onChange_3}
                value={this.state.taxNumber}
              />
              <br />
              <Button variant="primary" type="submit" onClick={handleClose}>
                Kaydet
              </Button>
              <Button variant="danger" onClick={handleClose}>
                Kapat
              </Button>
            </Form>
          </Modal.Body>
        </Modal>
      </>
    );
  };

  componentDidMount() {
    axios
      .get('http://localhost:5000/companies/')
      .then(response => {
        this.setState({ companies: response.data });
      })
      .catch(error => {
        console.log(error);
      });
  }

  onDelete = id => {
    axios.delete('http://localhost:5000/companies/' + id).then(response => {
      console.log(response.data);
    });

    this.setState({
      companies: this.state.companies.filter(el => el._id !== id)
    });
  };

  onEdit = id => {
    axios.post('http://localhost:5000/companies/edit/' + id).then(response => {
      console.log(response.data);
    });

    this.setState({
      companies: to be done
    });
  };

  companyList() {
    if (!this.state.searchTerm) {
      return this.state.companies.map(currentcompany => {
        return (
          <Company
            company={currentcompany}
            onDelete={this.onDelete}
            key={currentcompany._id}
          />
        );
      });
    } else {
      return this.state.companies
        .filter(company => {
          return company.companyName
            .toLowerCase()
            .includes(this.state.searchTerm);
        })
        .map(matchingCompany => {
          return (
            <Company
              company={matchingCompany}
              onDelete={this.onDelete}
              key={matchingCompany._id}
            />
          );
        });
    }
  }

  onSearchCompanyName = e => {
    this.setState({
      searchTerm: e.target.value
    });
  };

  render() {
    return (
      <div>
        <br />
        <h2>Firmalar</h2>
        <hr />
        <this.CompanyModal />
        <hr />
        <Form>
          <FormControl
            placeholder="Firma Ara"
            onChange={this.onSearchCompanyName}
            value={this.state.searchTerm}
          ></FormControl>
        </Form>
        <br />

        <Table striped bordered hover>
          <thead>
            <tr>
              <th>Firma Adı</th>
              <th>Vergi Dairesi</th>
              <th>Vergi Numarası</th>
              <th>Eklenme Tarihi</th>
              <th>Düzenle</th>
            </tr>
          </thead>
          <tbody>{this.companyList()}</tbody>
        </Table>
      </div>
    );
  }
}

export default Companies;

节目视图：截图

• 这是一个MERN项目:
• 我正在开发一个web应用程序，可以对公司模型进行用户CRUD操作。
• 我已经执行了Get-Add-Delete操作，但我对更新操作感到困惑。
• 我想使用我的CompanyModal（它是一个用于添加公司的引导模式）组件模式来编辑公司。
• 你能给点提示或建议做这件事吗？其实我脑子一片空白。

Answer 1

   const Company = props => (
      <tr>
        <td>{props.company.companyName}</td>
        <td>{props.company.taxOffice}</td>
        <td>{props.company.taxNumber}</td>
        <td>{props.company.date}</td>
        <td>
          <Button variant="danger" onClick={()=>handleDelete(props)}>Delete</Button>
        </td>
        <td>
          <Button variant="success" onClick={()=>handleEdit(props)}>Edit</Button>
        </td>
      </tr>
    );

在将数据传递给Company组件的位置定义HandleDelete函数

handleDelete=(data)=>{
  // make api request to delete object by(data.id)
}
handleEdit=(data)=>{
 //make your model show to true
 // then set your data fiels to state.
 // then make your model show to false after updation
}

将HandleDelete和HandleEdit传递给Company组件

    companyList() {
        return this.state.companies.map(currentcompany => {
          return <Company handleDelete={this.handleDelete} 
          company={currentcompany} key={currentcompany._id} 
          handleEdit={this.handleEdit}/>;
        });
      }