Question

我正在 React 中创建车辆配置器。用户选择车辆型号、发动机和变速箱。有些车型可能不会与某些发动机组合，而最强大的发动机可能只有一种类型的变速箱。所有应用逻辑都有效，但我遇到了一些问题。

如果我们先选择发动机而不是车型，我们仍然可以针对每个发动机调整每个车型。
目前，我需要为每个模型添加正确的引擎类型。我想以某种方式简化这个过程，但这是目前我想出的唯一解决方案。

此外，在我看来，从 UI 方面来看，这一切都是不正确的。或许有人会想出一个办法，如何隐藏所选车型无法使用的引擎。

我的代码

import React, {useState, useEffect} from "react";
import styles from './style.module.scss';

const ModelsTypes = [
    {
        name: "pro rs3",
        price: 100000,
        engines: ["2.0 166bhp", "5.2l 532bhp", "4.2l 443bhp", "3.6 374bhp"]
    },
    {
        name: "uber rs2",
        price: 50000,
        engines: ["2.0 166bhp", "5.2l 532bhp", "4.2l 443bhp", "3.6 374bhp"]
    },
    {
        name: "standard",
        price: 10000,
        engines: ["2.0 166bhp", "5.2l 532bhp", "4.2l 443bhp", "3.6 374bhp"]
    },
    {
        name: "wk",
        price: 5000,
        engines: ["2.0 166bhp"]
    },
]

const EngineTypes = [
    {
        name: "5.2l 532bhp",
        price: 10000,
        gearbox: ["Automatic"]
    },
    {
        name: "4.2l 443bhp",
        price: 9000,
        gearbox: ["Automatic", "Manual"]
    },
    {
        name: "3.6 374bhp",
        price: 5000,
        gearbox: ["Automatic", "Manual"]
    },
    {
        name: "2.0 166bhp",
        price: 1000,
        gearbox: ["Automatic", "Manual"]
    },
]

const Gearbox = [
    {
        name: "Manual",
        price: 5000,
    },
    {
        name: "Automatic",
        price: 10000,
    },
]


export const CarCustomization = () => {

    const [carModel, setCarModel] = useState("");
    const [carEngine, setCarEngine] = useState("");
    const [carGearbox, setCarGearbox] = useState("");
    const [totalPrice, setTotalPrice] = useState(0);

    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.name === e.target.value));
    }

    return (
        <div className={styles.wrapper}>
            <div>
                <h1>Car config</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} disabled={!carModel?.engines?.includes(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.name} disabled={!carEngine?.gearbox?.includes(gearbox.name)}/>
                                <span>{gearbox.name}</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.name}</li>
                        <li>${totalPrice}</li>
                    </ul>
                </div>
            </div>
        </div>
    );
}

如何强制用户一一选择选项？

0 个答案: