Question

我有一个react组件，其中包含诸如dropdown, 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: ""
};

如果用户选择选项Today’s Priority，则不需要输入字段。如果选择了其他任何选项，则将显示其他三个输入字段From, To & Individual。
如果用户关注value type="from" or "to" 的文本字段，则他无法提交value type="individual"的值，因此该字段将变为read-only。同样，如果用户专注于value type="individual的文本字段，则他不能提交value type="from" or "to"的值，因此具有type="from" and "to"的字段都将变为read-only。
此外，如果用户首先选择text field with value = individual，则输入一些值。切换到text field with value = from or to后，输入一些值，状态individual的值应再次为空。反之亦然。
无论选择什么值，都将以以下方式呈现："dropdownSelectedKey: inputFieldValueTypeFrom - inputFieldValueTypeTo"或"dropdownSelectedKey: inputFieldValueTypeIndividual"，带有十字按钮（可以删除下拉过滤器）。

现在，我几乎已经实现了以上所有要点的所有功能和所需的状态。但是没有按要求得到结果。无论我选择“从-到”还是“单个”文本字段，呈现的值始终为undefined。

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

这是工作链接：https://codesandbox.io/s/distracted-sanne-e9cf5

请帮助解决该问题。预先感谢

Answer 1

为满足您的要点4，我对Filter.js进行了一些更改。请签出。

https://codesandbox.io/s/cocky-mcnulty-ppxjl?file=/src/Filter.js

我对onFocus或onBlur事件没有任何要求。让我知道那里是否有任何问题。

反应形式的动态下拉选择

1 个答案: