React-router-dom and state

问题描述 投票：0回答：2

我有一个使用react-router-dom的小React应用。然后，我有三个不同的组成部分。收入，编辑收入和增加收入。 收入是以表格形式显示收入（以及发票号，添加日期，标题，描述等其他详细信息）的第一页。收入的每一行都有一个“编辑”和“删除”按钮。单击收入的编辑按钮后，将加载edit-income页面，以便我可以编辑详细信息并保存更改，这些更改将反映在我的Incomes页面上。相同的概念应用于add-income页面，这是向Income页面上的那些增加新收入的第三页。

[有人可以向我展示在这三个组件（收入，增加收入，编辑收入）之间共享数据的最佳方法，而不会在呈现任何我的任何组件时丢失存储在“状态”对象中的数据。 

import React, { useState, Component } from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import './fonts/css/all.css';
import './App.css';


let Context = React.createContext();

class Provider extends Component {
state = [
  { title: 'Fees', category: 'tuition', amount: 300, invNum: '001', date: 
  '23-03-99', note: 'My Payment' },
  { title: 'SRC', category: 'tuition', amount: 400, invNum: '002', date: 
  '26-06-99', note: 'My Dues' },
  { title: 'PTA', category: 'tuition', amount: 500, invNum: '003', date: 
  '29-09-99', note: 'My Check' }
]


render() {
  return (
    <Context.Provider value={{
       state: this.state,


    delInc: (e) => {
      let target = e.target.closest('tr');
      console.log(target);
      let parent = document.querySelector('.table-row');
      let arrParent = Array.from(parent.children);
      let index = arrParent.findIndex(index => index === target);
      let state = this.state.splice(index, 1);

      if (this.state.length === 0) {
        document.querySelector('#display').style.display = 'block';
      }
    },


    addInc: () => {

      let state = [...state, {
        title: 'Mass', category: 'tuition', amount: 500, invNum: '003', 
        date: '29-09-99', note: 'My Check'
      }];
      console.log(state);
      this.setState({ state });
    }  
  }}>
    {this.props.children}
  </Context.Provider>
)
}

}


/**** INCOME COMPONENT */
function Income({ index, income }) {

  return (
    <Context.Consumer>
      {(c) => (
        <React.Fragment>
          <td className="title">{c.state[index].title}</td>
          <td className="category">{c.state[index].category}</td>
          <td className="amnt">{c.state[index].amount}</td>
          <td className="invc-num">{c.state[index].invNum}</td>
          <td className="date">{c.state[index].date}</td>
          <td className="note">{c.state[index].note}</td>
          <td className="action">
          <a href="/edit" id="edit-bttn">
            <i className="fa fa-pen-nib"></i>
          </a>

          <a href="#!" id="del-bttn" onClick={c.delInc}>
            <i className="fa fa-trash"></i>
          </a>
          </td>
      </React.Fragment>
     )}
   </Context.Consumer>

  );
 }

/** INCOMES COMPONENT */
function Incomes() {

return (
  <Context.Consumer>
    {(c) => (

      <React.Fragment>
        <div id="income-header" onLoad={c.addInc()}>
          <i className="fa fa-coins"></i>
          <span className="hero-txt"> Income</span>
        </div>

        <a href="/add" id="add-inc-bttn">
          <i className="fa fa-plus-circle"></i> Add Income
        </a>

        <div id="display">No Incomes to Display</div>

        <table>
          <tr className="header-row">
            <th className="title">Title</th>
            <th className="category">Category</th>
            <th className="amnt">Amount</th>
            <th className="invc-num">Invoice No.</th>
            <th className="date">Date</th>
            <th className="note">Note</th>
            <th className="action">Action</th>
          </tr>

        <Context.Consumer>
          {(c) => (
            <>
              <tbody className="table-row">
                {c.state.map((income, index) => (
                  <tr>
                    <Income
                      key={index}
                      income={income}
                      index={index}
                    />
                  </tr>
                ))}
              </tbody>
            </>
          )}

        </Context.Consumer>
      </table>

    </React.Fragment>)}
</Context.Consumer>
)
}

function Edit() {

return (
  <Context.Consumer>
    {(c) => (
      <>
        <div className="edit-box">
        <div id="edit-header">
          <i className="fa fa-pen"></i>
          <span className="hero-txt"> Edit Income</span>
        </div>

        <a href="/incomes" id="view-bttn">
          <i className="fa fa-eye"></i> View all
        </a>

        <h3 id="prompt">
          <i className="fa fa-check-double"></i> Income Updated successfully!
        </h3>

        <div className="edit-frame">
          <div className="row-1">
            <div id="title">
              <label className="label">
                <span>*</span> Title
          </label>
              <input type="text" size="60" />
            </div>

            <div id="category">
              <label>
                <span>*</span> Category
          </label>

              <select className="select">
                <option>One</option>
                <option>Two</option>
                <option>Three</option>
                <option>Four</option>
              </select>
            </div>
          </div>

          <div className="row-2">
            <div id="uniform">
              <label>School uniform</label>
              <input type="text" size="35" />
            </div>

            <div id="invc">
              <label>Invoice Number</label>
              <input type="text" size="35" />
            </div>

            <div id="date">
              <label>
                <span>*</span> Income date
          </label>
              <input type="date" />
            </div>
          </div>

          <div>
            <label>Note:</label>
            <textarea className="notes" cols="120" rows="5">
              Note
        </textarea>
          </div>

          <div className="add-box">
            <a href="#" className="add-inc-btn">
                Add New Income <i class="fa fa-plus-circle"></i>
            </a>
          </div>
        </div>
      </div>
    </>
  )}
</Context.Consumer>

  );
}


function Add() {
  return (
    <Context.Consumer>
       {(c) => (
         <div className="edit-box">
         <div id="edit-header">
           <i className="fa fa-pen"></i>
           <span className="hero-txt"> Add New Income</span>
         </div>

         <a href="/incomes" id="view-bttn">
           <i className="fa fa-eye"></i> View all
         </a>

         <h3 id="prompt">
           <i className="fa fa-check-double"></i> Income added successfully !
         </h3>

      <div className="edit-frame">
        <div className="row-1">
          <div id="title">
            <label className="label">
              <span>*</span> Title
          </label>
            <input type="text" size="60" />
          </div>

          <div id="category">
            <label>
              <span>*</span> Category
          </label>

            <select className="select">
              <option>One</option>
              <option>Two</option>
              <option>Three</option>
              <option>Four</option>
            </select>
          </div>
        </div>

        <div className="row-2">
          <div id="uniform">
            <label>School uniform</label>
            <input type="text" size="35" />
          </div>

          <div id="invc">
            <label>Invoice Number</label>
            <input type="text" size="35" />
          </div>

          <div id="date">
            <label>
              <span>*</span> Income date
          </label>
            <input type="date" />
          </div>
        </div>

        <div>
          <label>Note:</label>
          <textarea
            className="notes"
            cols="120"
            rows="5"
            placeholder="Type Here..."
            defaultValue="Note"
          >
          </textarea>
        </div>

        <div className="add-box">
          <a href="#!" className="add-inc-btn" onClick={c.addInc}>
            Add New Income <i class="fa fa-plus-circle"></i>
          </a>
        </div>
      </div>
    </div>
      )}
    </Context.Consumer>
  );
}


 /**** APP COMPONENT */
class App extends Component {

render() {
   return (
     <Provider>
        <Router>
        <Switch>
          <Route exact path="/incomes" component={Incomes} />
          <Route path="/add" component={Add} />
          <Route path="/edit" component={Edit} />
          </Switch>
       </Router>
       </Provider>
    )
  }
}

export default App;

我有一个使用react-router-dom的小React应用。然后，我有三个不同的组成部分。收入，编辑收入和增加收入。收入是显示收入的第一页（以及其他...

reactjs react-router-dom
2个回答
0
投票

如果您共享您的代码，我们会变得更好。但是您可以检查一下，它只是提供了有关如何在组件之间共享数据的想法。

0
投票

您在这里有几个选择，但是我会同意侯赛因的建议，但是，您应该知道您有什么选择。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.