根据 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，则不渲染。

我的例子过于简单，因为我不知道你是如何实现任何东西的。