Question

这是我正在从事的React项目。需要帮助表。我有一个用于员工的表，其中每一行都有一个不同的员工，我输入了每个员工的天数，其他值则根据天数来计算。因此，假设pf，esi，应付款是基于此计算的。

现在，有一种方法可以进行这些计算。对于每一行，我们可以设置不同的变量像第1行，employee1，我们可以 days1和pf1，esi1，amtPayable1会相应地进行计算然后我可以对row2做同样的事情。因此它将是days2，并且将相应地计算pf2，esi2，amtPayable2。但是我不认为这是最好的方法。如果有100行怎么办？我会创建这些变量100次吗？并且代码将不再是动态的。

那么，最好的方法是什么？

我还没有编写完整的代码，因为我打算像这样编写它，但是看到了这种方法的问题，因此我在问这样做的正确和更好的方法。

但是，人们仍然希望看到一些相关的代码以更好地理解我的意思，所以这里是相关的代码此代码适用于3行，即3名员工，这意味着如果有100名员工，我可能必须创建days100，pf100，esi100，amtPayable100。

这使我认为这不是最好的方法，因此我认为必须有更好的方法。

反正这是代码

let days1 = e.target.value;
let pf1 = days1*(12/100);
let esi1 = pf1*0.25;
let amtPayable1 = pf1 + es1 + 100;

let days2 = e.target.value;
let pf2 = days2*(12/100);
let esi2 = pf2*0.25;
let amtPayable2 = pf2 + es2 + 100;

let days3 = e.target.value;
let pf3 = days3*(12/100);
let esi3 = pf3*0.25;
let amtPayable3 = pf3 + es3 + 100;

获得以上所有变量的值后，我将其用作其他表的数据。像这样的东西：

 const data = [{
            key: '1',
            name: 'Jerry gold',
            days: days1,            
            amtpayable:amtPayable1,           
            pf:pf1,
            esi:esi1,         

          }, {
            key: '2',
            name: 'Arnold Smith',
            days: days2,            
            amtpayable:amtPayable2,           
            pf:pf2,
            esi:esi2,         

          },
          {
            key: '3',
            name: 'Baker',
             days: days3,            
            amtpayable:amtPayable3,           
            pf:pf3,
            esi:esi3,     
          }
          ];

所以，您看到这里有很多重复，我想办法避免这种情况。

@Rafael，这不是ajax调用。一切都基于天数来计算。因此，某人（例如雇主）输入了每个员工在场的天数，并根据该输入计算出其他值，并将数据提供给另一个表。

Answer 1

这是我如何做的基础。使用具有属性的类而不是原始数据对象。为人员的计算字段创建属性。将对象传递给知道如何很好地显示Person字段的React组件。例如，表组件可以为每个人创建一个行。

class Person {
  constructor(properties) {
    Object.assign(this, properties);
  }
  
  get pf() {
    return this.days * 12 / 100;
  }
  
  get esi() {
    return this.pf * 0.25;
  }
  
  get amtPayable() {
    return this.pf + this.esi + 100;
  }
}

let MyRow = (props) => (
  <tr>
    <td>{props.item.name}</td>
    <td>{props.item.days}</td>
    <td>{props.item.pf}</td>
    <td>{props.item.esi}</td>
    <td>{props.item.amtPayable}</td>
  </tr>
);

let MyTable = (props) => (
  <table>
    <tr>
      <th>Name</th>
      <th>Days</th>
      <th>pf</th>
      <th>esi</th>
      <th>amtPayable</th>
    </tr>
    {props.data.map(item => <MyRow item={item} />)}
  </table>
);

const data = [
  new Person({
    key: '1',
    name: 'Jerry gold',
    days: 101
  }),
  new Person({
    key: '2',
    name: 'Arnold Smith',
    days: 102
  }),
  new Person({
    key: '3',
    name: 'Baker',
    days: 103     
  })
];

// Render it
ReactDOM.render(
  <MyTable data={data} />,
  document.getElementById("react")
);

table {
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid black;
  padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Answer 2

这个问题涉及面很广，但是在聊天讨论之后，听起来您不确定如何使用最终从数据库中检索到的硬编码员工姓名来减少重复。

以下是一个使用employee数组的示例，该数组填充表格并根据每位员工的天数的变化来更新pf，esi和应付金额：

let employees = [ 'Jerry gold', 'Arnold Smith', 'Baker' ];

let tbody = document.getElementById('list');
let tbodyHTML = '';

employees.forEach(insertRow);
tbody.innerHTML = tbodyHTML;

function insertRow(employeeName) {
  tbodyHTML += `
    <tr class="employee">
      <th scope="row" class="name" style="text-align: left">${employeeName}</th>
      <td class="pf">--</td>
      <td class="esi">--</td>
      <td class="payable">--</td>
      <td class="days">
        <input type="number" min="0" onchange="updateEmployeeData(this)">
      </td>
    </tr>
  `;
}

function updateEmployeeData(aNumberInput) {
  let days = parseInt(aNumberInput.value);
  let tr = aNumberInput.parentNode.parentNode;

  let pf = days * 12 / 100;
  let esi = pf * 0.25;
  let payable = pf + esi + 100;

  const HUNDREDTHS_PLACE = 2;
  let payable_td = tr.querySelector('.payable');
  tr.querySelector('.pf').innerHTML = pf.toFixed(HUNDREDTHS_PLACE);
  tr.querySelector('.esi').innerHTML = esi.toFixed(HUNDREDTHS_PLACE);
  payable_td.innerHTML = '$' + payable.toFixed(HUNDREDTHS_PLACE);
  
  if (payable <= 100.15) {
    payable_td.dataset.range = 'low';
  } else if (payable > 100.15 && payable < 100.50) {
    payable_td.dataset.range = 'med';
  } else if (payable > 100.50) {
    payable_td.dataset.range = 'high';
  } else {
    delete payable_td.dataset.range;
  }
}

#employeeTable tbody>tr:nth-child(odd) {
  background-color: lightgrey;
}

#employeeTable th,
td {
  padding: 0.5em;
  text-align: center;
}

#employeeTable th {
  text-transform: uppercase;
}

#employeeTable caption {
  font-style: italic;
  color: grey;
}

#employeeTable td.payable {
 transition: background-color 1s;
}

#employeeTable td.payable[data-range="low"] {
  background-color: red;
}

#employeeTable td.payable[data-range="med"] {
  background-color: yellow;
}

#employeeTable td.payable[data-range="high"] {
  background-color: lightgreen;
}

<table id="employeeTable">
    <colgroup class="name_col"></colgroup>
    <caption>employee data</caption>
    <thead>
        <tr>
            <th scope="col">name</th>
            <th scope="col">pf</th>
            <th scope="col">esi</th>
            <th scope="col">payable</th>
            <th scope="col">days</th>
        </tr>
    </thead>
    <tbody id="list">
    </tbody>
</table>

需要逻辑或设计模式帮助-反应

2 个答案: