从多个下拉列表中选择不同的值具有相同的数据

问题描述

现在当我从第一个选择列表中选择一个选项时，它会自动设置第二个选择列表的值，但是我想如果我从第一个选择列表中选择一个选项，它应该设置第一个选择的值，并且第二个选择列表的值相同.

  import React,{useState} from "react";

    const options = [
    {
        label: "Acai Berry",value: "acaiBerry",color: "#FF4D4D",quantity: 1,price: 20
    },{
        label: "Blood Orange",value: "bloodorange",price: 32
    },{
        label: "Honey Ginger Lemon",value: "honeyginger",price: 17
    }
    ];

    const RandomizerComponent = () => {
    const [bundle,setBundle] = useState("acaiBerry");

    const handleChange = (e) => {
        setBundle(e.target.value);
    };
    const spin = () => {
        randomItems();
    };

    const randomItems = () => {
        const length = selectItems.length;
        const randomIndex = Math.floor(Math.random() * length);
        const data = selectItems[randomIndex].value;
        setBundle(data);
    };

    const quantity = 2;
    // Rabdomizer Qunatity and Data
    const quantityOfSomething = new Array(quantity).fill(options);

    return (
        <div>
        <h1 style={{textAlign: "center"}}>CONFIRM SELECTION</h1>
        <div className="select-container">
            <div className="select-Wrapper">
            {quantityOfSomething.map((item,index) => (
                <div key={`${item}-${index}`}>
                <select
                    value={bundle}
                    onChange={handleChange}
                    className="selectList"
                >
                    {item.map((option,index) => (
                    <option key={index} value={option.value}>
                        {option.label}
                    </option>
                    ))}
                </select>
                <div>
                    {item
                    .filter((option) => option.value == bundle)
                    .map((filteredBundle,index) => (
                        <div className="image-wrapper" key={index}>
                        <img src={filteredBundle.image} alt="" />
                        </div>
                    ))}
                </div>
                </div>
            ))}
            </div>
            <div>
            <button onClick={spin} className="spin-btn">
                Spin
            </button>
            </div>
        </div>
        </div>
    );
    };

    export default Randomizer;

这是上面代码的输出

这是参考网站：https://simulate.com/buy/

解决方法

您的代码：

<select value={bundle} onChange={handleChange} className="selectList" >

它通过地图运行，但在两个选择框中您都分配了 value={bundle}。因此，无论何时setBundle，它都会影响两个选择框的状态。

请分配单独的 id 并检查哪个选择框已更改或创建两个单独的更改处理程序并将事件分别绑定到它们。