Reactjs 如何使用处理程序处理不同类型的事件，特别是下拉列表而不是文本字段。SPFX/React

这是以下内容的延续：

我现在想使用这个处理程序来“处理”一个下拉列表以及文本字段。到目前为止，我有：

public handleChange = (evt: any) => {
   const {value} = (evt.target as any);
   const obj = {  
     [evt.target.name]: value, 
   };
  this.setState(prevState => ({prevState, ...obj}));
}

它适用于文本字段。
现在，我希望它能够处理

office ui fabric

中的下拉组件。我尝试过创建一个完全不同的处理程序，如下所示：

public onDropDownChange = (evt: any) => {
  const {value} = (evt.target as any);
  this.setState({ value: evt.target.value});
}

public handleChange = (evt: any, item): void => {
  if(evt.target.value){
    //handle textfields here
  } else {
    //handle dropdowns here
    const id = evt.target.querySelector('span').id; //get the span's id
    //update state with the generated id and the selected option
    this.setState({ [id] : item }); 
  }
}

上述实验性的onDropDownChange不起作用。它给出一个错误，表示事件上不存在值。我相当肯定这是因为从下拉列表返回的内容不是“值”，很可能是“项”。 我可以专门为这个下拉列表编写一个函数，但我正试图减少使用处理程序编写的代码量

JSX:

顺便说一句：如果我记录下拉列表的更改，我会得到未定义，所以这就是问题的开始

此外，这里有一个“独立”函数，我过去在下拉列表中使用过，它可能会有帮助：

private _dropDownFunction = (item: IDropdownOption) => {
    this.setState({ SelectedItem: (item && item.key) ? item.key.toString() : null })

知道我能用什么吗？我对事件处理程序和最终的基本JS逻辑的理解是有限的，但我从给出的任何建议中学到了很多

更新：根据LevelGlow的回答，我已经能够从下拉列表中返回所选项目。我将此用于处理程序：

public onDropDownChange = (evt: any, item) => {
  // const {item} = (evt.target as any);
  console.log(evt+'evt with text');
  console.log(evt); // THIS IS THE ONE THAT SHOWS THE SELECTED ITEM!
  console.log(item.text+'item.text with text'); //Shows undefined
  console.log(item); //shows 3 (I guess this is id of the item)
  console.log(item.key+'item.key with text'); //shows undefined.

  this.setState({ 

  });

}

---

现在我不确定如何在处理程序中实现这一点，以更新状态项。

要从

下拉列表中获取所选项，请按照如下示例构造
下拉列表的
onChange
处理程序：

public onDropDownChange = (evt, item) => {
    console.log(item.key);
    console.log(item.text);
};

这里的
onChange
事件有一个DOM对象作为目标，它只存储下拉列表的
文本，可以通过

evt.target.querySelector('span').innerText;

您可以将
id
道具添加到
下拉列表中
：

<Dropdown
  id="JobPlanDD"
  ...
/>

这行所做的是：我们是否有
JobPlanDD选项
处于out状态？如果是，我们将把
JobPlanDD选项
项的键传递给
selectedKey
，如果不是，我们将传递
未定义的

按如下方式构造共享处理程序：

public onDropDownChange = (evt: any) => {
  const {value} = (evt.target as any);
  this.setState({ value: evt.target.value});
}


public handleChange = (evt: any, item): void => {
  if(evt.target.value){
    //handle textfields here
  } else {
    //handle dropdowns here
    const id = evt.target.querySelector('span').id; //get the span's id
    //update state with the generated id and the selected option
    this.setState({ [id] : item }); 
  }
}

由于我们更新了共享处理程序，我们还应该更新
TextField
s调用它的方式：

<TextField
  onChange={(e) => this.handleChange(e, null)}
  ...
/>

this.handleChange（e，null）}
...
/>

现在，文本字段和下拉列表都可以使用此共享处理程序。
打字
evt.target.value
不
event.target.value
？已更正，仍然不起作用。没有什么可以区分下拉列表和文本字段，是吗？例如，textfield可以有“name”属性，但dd不能。是否有一个等价物？请分享jsxcode@Tom您能提供一个正常工作（相同错误）的代码段吗？我正在尝试，但我需要知道您的
下拉列表是从哪里来的，
react bootstrap
/
语义ui
还是别的？你所在州的初始值是多少？您是否可以创建一个实时示例？您好，这是一个MS Fabric UI下拉列表：状态的初始值未定义，如上所述为空。正如您可以在这里看到的那样，
下拉列表
事件的
目标
是一个DOM对象，将第二个参数添加到
onChangeHandler
中，这是您正在查找的
idropdownpoption
对象。Hi@leverglowh-我已更新代码，允许我在下拉列表中返回所选项目。不确定如何在处理程序中实现。将项作为参数添加到共享处理程序是否有效？检查是否存在
evt.target.value
，如果不存在，是否使用
项
？
<TextField
  onChange={(e) => this.handleChange(e, null)}
  ...
/>