检查什么值​用户进行了检查

Question

我创建了一个简单的车辆配置程序，用于学习React。用户选择发动机型号、变速箱类型等。我已经完成了这个项目，我学到了很多，但我还有最后一个问题。我想为我的应用程序添加简单的逻辑。

我指的是这种类型的逻辑，所以我会用纯JavaScript编写它。

if (carModel === "wk" && carEngine === !"2.0 166bhp") {
alert("You can't pick this engine!")
}

import React, {useState, useEffect} from "react";
import styles from './style.module.scss';
const ModelsTypes = [
{
name: "pro rs3",
price: 100000,
},
{
name: "uber rs2",
price: 50000,
},
{
name: "standard",
price: 10000,
},
{
name: "wk",
price: 5000,
},
]
const EngineTypes = [
{
name: "5.2l 532bhp",
price: 10000,
},
{
name: "4.2l 443bhp",
price: 9000,
},
{
name: "3.6 374bhp",
price: 5000,
},
{
name: "2.0 166bhp",
price: 1000,
},
]
const Gearbox = [
{
gearbox: "Manual",
price: 5000,
},
{
gearbox: "Automatic",
price: 10000,
},
]

export const CarCustomization = () => {
const [carModel, setCarModel] = useState("");
const [carEngine, setCarEngine] = useState("");
const [carGearbox, setCarGearbox] = useState("");
const [totalPrice, setTotalPrice] = useState(0);
const [switchToggled, setSwitchToggled] = useState(false);

useEffect(() => {
setTotalPrice((carModel.price + carEngine.price + carGearbox.price) || 0);
}, [carModel, carEngine, carGearbox])
const addCarModel = (e) => {
setCarModel(carModel => ModelsTypes.find(x => x.name === e.target.value));
}
const addCarEngine = (e) => {
setCarEngine(carEngine => EngineTypes.find(x => x.name === e.target.value));
}
const addCarGearbox = (e) => {
setCarGearbox(carGearbox => Gearbox.find(x => x.gearbox === e.target.value));
}
return (
<div className={styles.wrapper}>
<div>
<h1>CKONFIG 5.1</h1>
<section>
<p className={styles.sectionName}>Model</p>
<div className={styles.itemWrapper}>
{ModelsTypes.map(model =>
<label className={styles.button}>
<input onClick={addCarModel} type="radio" name="Model" value={model.name}/>
<span>{model.name}</span>
</label>
)}
</div>
</section>
<section>
<p className={styles.sectionName}>Engine</p>
<div className={styles.itemWrapper}>
{EngineTypes.map(engine =>
<label className={styles.button}>
<input onClick={addCarEngine} type="radio" name="Engine" value={engine.name}/>
<span>{engine.name}</span>
</label>
)}
</div>
</section>
<section>
<p className={styles.sectionName}>Gearbox</p>
<div className={styles.itemWrapper}>
{Gearbox.map(gearbox =>
<label className={styles.button}>
<input onClick={addCarGearbox} type="radio" name="Gearbox"
value={gearbox.gearbox}/>
<span>{gearbox.gearbox}</span>
</label>
)}
</div>
</section>
</div>
<div className={styles.summary}>
<div className={styles.summaryinfo}>
<ul>
<li>Model</li>
<li>Engine</li>
<li>Gearbox</li>
<li>Price</li>
</ul>
<ul>
<li>{carModel.name}</li>
<li>{carEngine.name}</li>
<li>{carGearbox.gearbox}</li>
<li>${totalPrice}</li>
</ul>
</div>
</div>
</div>
);
}

我在这里的摘要部分考虑了条件呈现，但当我尝试添加它时，应用程序停止返回所选引擎的名称。

Answer 1

将有效引擎添加到ModelType:

{
name: "wk",
price: 5000,
engines: ["2.0 166bhp"]
},

并在您的jsx中添加到输入disabled={!carModel?.engines?.includes(engine.name)}:

{EngineTypes.map(engine =>
<label className={styles.button}>
<input onClick={addCarEngine} type="radio" name="Engine" value={engine.name} disabled={!carModel?.engines?.includes(engine.name)}/>
<span>{engine.name}</span>
</label>
)}