如何在 ReactJS 中实现多步导航/过滤表单？答案

【问题标题】：How to implement a multi step navigation/filter form in ReactJS?如何在 ReactJS 中实现多步导航/过滤表单？
【发布时间】：2018-05-10 13:10:17
【问题描述】：

我刚刚开始使用 ReactJS。我有 3 个由 li 元素组成的列表。

第二个列表根据用户从第一个列表中选择的选项填充选项。同样，第三个列表根据在第二个列表中选择的内容填充选项，因此这是一个三步过程。

到目前为止，我有两个组件，“FilterForm”和“StepTwo”。

我根据用户从第一个列表中选择的内容填充了第二个列表。

我正在寻找如何实施填充第三个列表的指导/建议？

感谢任何帮助。

【问题讨论】：

【解决方案1】：

我建议保持 FilterForm 两个选择的状态，下拉 1 和 2。

this.state = { selectedOptionLevel1: '' , selectedOptionLevel2: ''};

并处理第二次下拉单击以更新 selectedOptionLevel2 的状态，这将导致第三次下拉重新呈现

【讨论】：

感谢您的回答。那么我应该把所有东西都放在一个组件中吗？
感谢您的回答。假设我将列表 2 和 3 的人口分成两个部分； stepTwo 和 stepThree - 如何通知 FilterForm 已选择一个选项？
为此在 stepTwo 上添加一个名为 optionSelectedCallback 的道具。它将通过与 FilterForm 中定义的 handleSelectionChanged 一起传递。在组件 stepTwo 内部，dropdown 的事件处理程序应该将此方法调用为 this.props.optionSelectedCallback。希望这是有道理的
道歉 - 我很难跟上。我想到了三个组成部分； 1) FilterForm, 2) StepTwo 和 3) StepThree
对@Sid 感到抱歉。详细地说，filterForm 中的 handleSelectionChanged 应该更新级别 1 和 2 中选定选项的状态值。 stepThree 与 stepThree 类似，但它不需要回调属性，因为当 dropdown3 中的选择更改时我们不做任何事情。