根据选择字段中的选择值填充答案

【问题标题】：Populate based on choice values in select field根据选择字段中的选择值填充
【发布时间】：2020-07-01 12:46:59
【问题描述】：

我是新手，需要克服设计挑战。我想要做的是在选择字段中有一组选择值。每个选择值都有不同的 KPI 和 UOM 集。根据我选择的选项值，我应该能够使用弹出窗口来选择不同的 KPI 值。一旦我选择了一组 KPI 值。我应该能够在下表中显示它。

谁能告诉我如何做到这一点的例子？我正在使用材料 ui 和 react-bootstrap 来做同样的事情

这是下面的图片

【问题讨论】：

选项是多项选择
这有点含糊。您是否尝试将弹出窗口中的数据传递回主应用程序？
最初它使用一个数据库，但我想做的是为流程选择设置一组值，并根据流程选择填充 KPI 弹出窗口
如果我正确理解您的问题，您似乎应该根据用户选择设置状态，然后在显示弹出窗口时使用该数据。
是的，你有如何做到这一点的例子吗？

标签： javascript reactjs react-redux material-ui react-bootstrap

【解决方案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，则不渲染。

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

【讨论】：