javascript - 如何在 REACT JS 中为 onChange 事件更新 JSON 对象的状态？

Question

我的myrecords[]状态包含以下格式的 JSON 对象：

{
    "records": {
        "Master Automotives": [
            {
                "SparePartID": "43",
                "Name": "Oil and Lubricants",
                "Price": "4500",
                "VendorID": "48",
                "CompanyName": "Master Automotives",
                 "Qty": 1,
                 "TotalPrice": "4500"

            },
            {
                "SparePartID": "45",
                "Name": "Lights",
                "Price": "2300",
                "VendorID": "48",
                "CompanyName": "Master Automotives",
                 "Qty": 1,
                 "TotalPrice": "2300"
            }
        ],
        "Repair Solutions": [
            {
                "SparePartID": "47",
                "Name": "Steering Wheel",
                "Price": "1500",
                "VendorID": "60",
                "CompanyName": "Repair Solutions",
                 "Qty": 1,
                 "TotalPrice": "1500"
            }
        ],
        
         "FiveStar Automotives": [
            {
                "SparePartID": "51",
                "Name": "Brakes",
                "Price": "234",
                "VendorID": "70",
                "CompanyName": "FiveStar Automotives",
                 "Qty": 1,
                 "TotalPrice": "234"
            },
            {
                "SparePartID": "53",
                "Name": "Clutch",
                "Price": "999",
                "VendorID": "70",
                "CompanyName": "FiveStar Automotives",
                 "Qty": 1,
                 "TotalPrice": "999"
            },
              {
                "SparePartID": "55",
                "Name": "LED",
                "Price": "288",
                "VendorID": "70",
                "CompanyName": "FiveStar Automotives",
                 "Qty": 1,
                 "TotalPrice": "288"
            }
        ]
    }
}

现在我在 react js 中显示这条记录，所有项目都显示在行中并按它们的CompanyNames分组，并且每个项目都有一个数量的输入字段。Qty 默认为 1，因此 TotalPrice 与 UnitPrice 相同。

现在我想要Qty的任何特定输入字段的 onChange ， JSON对象中相应的 TotalPrice项也应该在myrecords[]状态下更新。此外，数量也应该在myrecords[] 状态下更新。

PS：myrecords[]包含 JSON对象而不是数组。

这是我显示 JSON 对象记录的反应代码：

  
  {Object.keys(this.state.myrecords).map((CompanyName, i) => (
<div key={CompanyName}>
   <h2>Supplier: {CompanyName}</h2>
   
  {this.state.myrecords[CompanyName].map((product, i) => (
  <tr>

    <td>
      <h4> {product["SparePartID"]} </h4>
    </td>

    <td>
      <h4>{product["Name"]} </h4>
    </td>

    <td>
      <h4> {product["Price"]} </h4>
    </td>

    <td>
      <input type="number"
      value={product["Qty"]}
      min="1"
      onChange={(e) => this.onChangeQty(product["SparePartID"], e)}/>
    </td>

    <td> $ {product["TotalPrice"]}
    </td>

  </tr>
  ))}
  
  </div>

  ))}

而onChangeQty函数如下**（这是我需要帮助的地方）**：

onChangeQty(sid,e)
{
   const items = this.state.myrecords;
  const item = items.find(item => item.SparePartID === sid);
  item.Qty = e.target.value;
  item.TotalPrice = item.Qty * item.Price;

  this.setState({
     myrecords: items
   });
}

标签： javascriptjsonreactjsstateonchange

Answer 1

先改这个

{this.state.myrecords[CompanyName].map((product, i) => (

到

{this.state.myrecords[CompanyName].map((product, j) => (

因为我们已经在上面的地图中使用了i 。

然后改变这个

onChange={(e) => this.onChangeQty(product["SparePartID"], e)}

到

onChange={(e) => this.onChangeQty(CompanyName, j, e)}

然后你的 onChange 应该是

onChangeQty(CompanyName,j,e)
{
   const items = {...this.state.myrecords};
  items[CompanyName][j].Qty = e.target.value;
  items[CompanyName][j].TotalPrice = e.target.value * items[CompanyName][j].Price;

  this.setState({
     myrecords: items
   });
}

如果您不喜欢基于 onChange 的索引，您也可以执行以下操作（基于 sid）。只需传递CompanyName,sid,e)此功能onChange={(e) => this.onChangeQty：

onChangeQty(CompanyName,sid,e)
{
   const items = {...this.state.myrecords};
  const j = items[CompanyName].findIndex(item => item.SparePartID === sid);
  items[CompanyName][j].Qty = e.target.value;
  items[CompanyName][j].TotalPrice = e.target.value * items[CompanyName][j].Price;

  this.setState({
     myrecords: items
   });
}

警告：代码未经测试。请检查并让我知道 ：）