我不知道如何使用 REACT 在我的表中顯示更多值。我唯一能證明的是成本。我無法顯示制造商和專案。所以當我選擇 Iphone12 時 - 制造商將是“Apple”，專案將是“iPhone 12”，Galaxy S21 將是“Android”和“Galaxy 21”，來自索引中的資料結構。這是我的 Index.js ：
import React from "react";
import ReactDOM from "react-dom";
import "./Home.css";
import "bootstrap/dist/css/bootstrap.min.css";
import MTWork from "./MTWork";
let inventory = [
{ id: 0, manufact: "None", item: "None", descr: "None", avail: 0, price: 0 },
{
id: 100,
manufact: "Samsung",
item: "Galaxy S22",
descr: "The Lastest Phone",
avail: 22,
price: 1399.99,
},
{
id: 101,
manufact: "Samsung",
item: "Galaxy S21",
descr: "Recently refurbished like new",
avail: 5,
price: 699.99,
},
{
id: 102,
manufact: "Samsung",
item: "Galaxy S20",
descr: "Great phone works well",
avail: 3,
price: 399.99,
},
{
id: 103,
manufact: "Apple",
item: "iPhone 13",
descr: "New and Shiny, Nothing better",
avail: 13,
price: 1299.99,
},
{
id: 104,
manufact: "Apple",
item: "iPhone 12",
descr: "Refurbished but perfect",
avail: 13,
price: 899.99,
},
{
id: 105,
manufact: "Apple",
item: "iPhone 11",
descr: "Works great!",
avail: 12,
price: 599.99,
},
];
let warranty = [
{ id: 0, plan: "None", cost: 0 },
{ id: 1, plan: "Extended", cost: 0.15 },
{ id: 2, plan: "Normal", cost: 0.1 },
{ id: 3, plan: "Base", cost: 0.05 },
];
let title = "Teds Technology Treasures";
ReactDOM.render(
<React.StrictMode>
<MTWork title={title} phones={inventory} wrnty={warranty} />
</React.StrictMode>,
document.getElementById("root")
);
這是我的MTWork.js
import { useState } from "react";
function MTWork(props) {
const { phones, title, wrnty } = props;
const [name, setName] = useState("Kels");
const [itm, setAndroid] = useState();
const [Atem, setApple] = useState();
const [Warrant, setWarranty] = useState(0);
const [total, setTotal] = useState(0);
function updateName(n) {
setName(n.target.value);
}
function updateAndroid(a) {
setAndroid(a.target.value);
}
function updateApple(ap) {
setApple(ap.target.value);
}
function updateWarranty(w) {
setWarranty(w.target.value);
}
function doOrder() {
let total = 0;
let total2 = parseFloat(itm) parseFloat(Atem);
let wTotal = total2 * parseFloat(Warrant);
total = total2 wTotal;
return setTotal(total);
}
return (
<div>
<div className="container-fluid">
<div className="row">
<div className="col">
<h1>
<span className="title">{title}</span>
</h1>
</div>
</div>
<div className="row">
<div className="col-4">
Name: <input type="text" value={name} onChange={updateName} />
<br />
Android Phone:
<select onChange={updateAndroid} value={itm}>
{phones.map((phn) => (
<option key={phn.id} value={phn.price}>
{phn.item}
</option>
))}
</select>
<br />
Apple Phone:
<select onChange={updateApple} value={Atem}>
{phones.map((Apn) => (
<option key={Apn.id} value={Apn.price}>
{Apn.item}
</option>
))}
</select>
<br />
Warranty:
<select onChange={updateWarranty} value={Warrant}>
{wrnty.map((wrn) => (
<option key={wrn.id} value={wrn.cost}>
{wrn.plan}
</option>
))}
</select>
<br />
<button className="btn btn-dark" onClick={() => doOrder()}>
Order
</button>
<h2 style={{ color: "blue" }}>Results For Name: {name}</h2>
<table className="table">
<tbody className="color">
<tr>
<th>Manufacturer:</th>
<th>Item:</th>
<th>Cost:</th>
</tr>
<tr>
<td scope="row">{phones.maunfact}</td>
<td scope="row">{phones.price}</td>
<td scope="row">{itm}</td>
</tr>
<tr>
<td scope="row">{phones.manufact}</td>
<td scope="row">{phones.price}</td>
<td scope="row">{Atem}</td>
</tr>
<tr>
<td>Warranty</td>
<td scope="row">{props.plan}</td>
<td scope="row">{Warrant}%</td>
</tr>
<tr>
<td scope="row">Total </td>
<td scope="row"></td>
<td scope="row">{total} </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
);
}
export default MTWork;
uj5u.com熱心網友回復：
您將 存盤price在您的選擇狀態。
您應該改為存盤選擇id（這將是唯一的）。
這樣，您始終可以通過 id 在您的電話/庫存陣列中找到該專案，然后獲取任何屬性（manufact、item、price、desc、avail）。
function MTWork(props) {
const { phones } = props;
const [selectedId, setSelectedId] = useState(); // store id
function updatePhone(event) {
setSelectedId(event.target.value);
}
const selectedPhone = phones.find((phone) => phone.id == selectedId) || {};
return (
<div>
Phone:
<select onChange={updatePhone} value={selectedId}>
{phones.map((phone) => (
<option key={phone.id} value={phone.id}>
{phone.item}
</option>
))}
</select>
<table>
<tbody>
<tr>
<th>manufact:</th>
<th>item:</th>
<th>price:</th>
<th>desc:</th>
<th>avail:</th>
</tr>
<tr>
<td>{selectedPhone?.manufact}</td>
<td>{selectedPhone?.item}</td>
<td>{selectedPhone?.price}</td>
<td>{selectedPhone?.descr}</td>
<td>{selectedPhone?.avail}</td>
</tr>
</tbody>
</table>
</div>
);
}
const selectedPhone = phones.find((phone) => phone.id == selectedId) || {};
Uses Array.find on the phones array to get the phone that has the same id as selectedId. If it can't find a match it will return undefined, so we assign a value of empty object {} to selectedPhone.
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/439978.html
標籤：javascript 反应