根據 select 字段中的選擇值填充

Question

我是新來的反應並且有一個設計挑戰需要克服。 我想要做的是在選擇字段中有一組選擇值。 每個選擇值將具有不同的 KPI 和 UOM 集。 根據我選擇的選擇值，我應該能夠使用彈出到 select 不同的 KPI 值。 一次我 select 一組 KPI 值。 我應該能夠在下表中顯示它。

任何人都可以告訴我如何做到這一點的例子嗎？ 我正在使用材料 ui 和 react-bootstrap

這是下面的圖片

Answer 1

一個非常簡單的例子：

function Page(props) {

    const [choice1, setChoice1] = React.useState(null)
    const [choice2, setChoice2] = React.useState(null)
    ... as many as you need
 
    const handleChoice1 = (event) => {
        setChoice1(event.target.value)
    }
    ... as many as you need
 
    return (
        <div>
            Your page here with selections that call your handleChoice functions when users select them
        </div>
        <Popup open={open}>
            <DisplayContent choice1={choice1} choice2={choice2} />
        </Popup>
        
    )
 
 }

將您的 state 傳遞給<DisplayContent />並相應地呈現正確的數據。 如果它們是 null，則不渲染。

我的例子過於簡單，因為我不知道你是如何實現任何東西的。