在React表中的表格

Question

我正在构建一个预算应用程序，并且正在使用React-able来显示我的交易。要添加新交易，我想单击一个New +按钮，然后单击顶部的react-table中具有可编辑字段的表单呈现器。保存后，该表单将发布到我的API，并且该表应重新加载，并在顶部显示新的交易记录。这可能是最好的办法吗？

Transactions.js：

import React from 'react';
import axios from 'axios';

import ReactTable from "react-table";
import "react-table/react-table.css";

import TransactionForm from "./TransactionForm";

const API = 'http://127.0.0.1:8000/api/transactions/';

class Transactions extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      transactions: [],
      isLoading: false,
      error: null
    };
  }

  handleAddTransaction() {
    console.log("New button clicked")
  }

  componentDidMount() {
    this.setState({isLoading: true});

    axios.get(API).then(response => this.setState({transactions: response.data.results, isLoading: false})).catch(error => this.setState({error, isLoading: false}));
  }

  render() {
    const {transactions, isLoading, error} = this.state;

    if (error) {
      return <p>{error.message}</p>;
    }

    if (isLoading) {
      return <p>Loading.............</p>;
    }

    return (
      <div>
        {/* <div><TransactionForm /></div> */}
        <button onClick={() => this.handleAddTransaction()} type="button">New +</button>
        <div>
          <ReactTable
            data = {transactions}
            columns = {[
            {
              Header: 'Date',
              accessor: 'date',
              width: 200
            },
            {
              Header: 'Payee',
              accessor: 'payee',
              width: 400
            },
            {
              Header: 'Category',
              accessor: 'category',
              width: 200
            },
            {
              Header: 'Amount',
              accessor: 'amount',
              width: 200
            },
            {
              Header: 'Balance',
              accessor: 'balance',
              width: 200
            }]}
            defaultPageSize = {500}
            sortable = {false}
            manual
            style={{
              height: "800px"
            }}
            className="-striped -highlight"
          />
        </div>
      </div>)
  };
}

export default Transactions;

TransactionForm.js：

import React from 'react';
import axios from 'axios';

const API = 'http://127.0.0.1:8000/api/transactions/';

class TransactionForm extends React.Component {
  constructor() {
    super();

    this.state = {
      date: "",
      payee: "",
      category: "",
      amount: "",
      is_cleared: true,
      paid_or_deposited: true
    };
  }

  onChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    });
  }

  onSubmit = (e) => {
    e.preventDefault();
    const {
      date,
      payee,
      category,
      amount,
      is_cleared,
      paid_or_deposited
    } = this.state;

    axios.post(API, {
      date,
      payee,
      category,
      amount,
      is_cleared,
      paid_or_deposited
      })
      .then((result) => {
        console.log(result)
      });
  }

  render() {

    const {
      date,
      payee,
      category,
      amount,
      is_cleared,
      paid_or_deposited
    } = this.state;

    return (
      <form onSubmit={this.onSubmit}>
            <input
              type="checkbox"
              name="is_cleared"
              value={is_cleared}
              onChange={this.onChange}
            />
            <input
              type="text"
              name="date"
              value={date}
              onChange={this.onChange}
            />
            <input
              type="text"
              name="payee"
              value={payee}
              onChange={this.onChange}
            />
            <input
              type="text"
              name="category"
              value={category}
              onChange={this.onChange}
            />
            <input
              type="text"
              name="amount"
              value={amount}
              onChange={this.onChange}
            />
            <input
              type="checkbox"
              name="paid_or_deposited"
              value={paid_or_deposited}
              onChange={this.onChange}
            />
            <button type="submit">Submit</button>
      </form>
    );
  }
}

export default TransactionForm;