根据选择字段中的选择值进行填充

Question

我是新来的反应者，有一个设计难题要克服。我想做的是在选择字段中有一组选择值。每个选择值将具有不同的KPI和UOM集。基于我选择的选择值，我应该能够使用弹出窗口选择不同的KPI值。一旦我选择了一组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>
        
    )
 
 }

将您的状态传递到<DisplayContent />并相应地呈现正确的数据。如果它们为null，则不呈现任何内容。

我的示例过于简单，因为我不知道您是如何实现的。