Javascript 反应表单中的动态下拉选择

我有一个react组件，它包含一些字段，如

下拉列表、textInput1、textInput2和textInput3

。此组件的行为如下所示：

下拉列表动态映射上下文中选择下拉列表的选项，该下拉列表包含具有对象数组的初始状态：

const initialState = {

 filter_options: [

 {
   title: "Today’s Priority",
   abbr: "tpp",
   extended: false,
   quick_filter: true
 },
 {
   title: "ID",
   abbr: "pid",
   extended: true,
   quick_filter: false
 },
 {
   title: "Last Name",
   abbr: "lname",
   extended: true,
   quick_filter: false
 },
 {
   title: "First Name",
   abbr: "fname",
   extended: true,
   quick_filter: false
 },
 {
   title: "Total Count",
   abbr: "tnic",
   extended: true,
   quick_filter: false
 }],
 selected_filter: ""
};

如果用户选择选项

当前的优先级

，则不需要输入字段。如果选择了任何其他选项，则将显示其他三个输入字段

From、To&Individual

如果用户关注带有

value type=“from”或“to”的文本字段，则他无法提交
value type=“individual”
的值，因此该字段将变为
只读。类似地，如果用户关注带有
value type=“individual
的文本字段，则他无法提交
value type=“from”或“to”
的值，因此带有
type=“from”和“to”
的字段将变为
只读

此外，如果用户首先选择值为个人的

文本字段，输入一些值。然后切换到值为from或to的
文本字段，输入一些值，则状态
个人的值应再次为空。反之亦然

无论选择的值是什么，它都以如下方式呈现：

“dropdownSelectedKey:inputFieldValueTypeFrom-inputFieldValueTypeTo”

或

“dropdownSelectedKey:inputFieldValueTypeIndividual”

，并带有交叉按钮（可移除下拉过滤器）

现在，我几乎实现了上述所有点的所有函数和必需状态。但没有按照要求获得结果。无论我选择“从到”还是“单个”文本字段，呈现的值始终是未定义的

我被困了很长时间，无法找到正确的方法使它工作

以下是工作链接：

---

请帮助修复此问题。提前感谢

为了满足您的第4点，我对Filter.js做了一些更改。请检查

---

我没有得到关于onFocus或onBlur事件的任何要求。如果有任何问题，请告诉我。

谢谢，第4点现在似乎工作得很好。你能用我的方法解释一下这些问题吗？我的意思是，你所做的更改只关注onChange函数定义，然后是reducer中的新操作类型定义。我在reduce中创建了两个新类型r、 根据输入名称触发它们。还重构了一些代码以实现简单和干净的代码。只有onChange事件就足够了。