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

Question

这是以下内容的延续： 如何创建一个处理程序函数来"处理"多个文本字段以及字符计数器文本字段

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

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});
}

上面的实验性，onDropDownChange不起作用。它给出一个错误，指出事件上不存在值。我相当确定这是因为从下拉列表中返回的任何内容都不是"值"，很可能是"项目"。 我可以专门为此下拉列表编写一个函数，但我正在尝试减少使用处理程序编写的代码量。

JSX：

<Dropdown
selectedKey={this.state.SelectedJobPlanDD}
placeholder="Select..."
onChange={this.onDropDownChange}
options={jobPlanDDOptions}
defaultSelectedKey={this.state.JobPlanDD}
/>

州：

SelectedJobPlanDD: undefined,
JobPlanDD: null,

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

另外，这是我过去用于下拉列表的"独立"函数，它可能会有所帮助：

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

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

更新：从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({ 
});
}

现在我不确定如何将它实现到处理程序中以更新状态项。

Answer 1

要从Dropdown中获取所选项目，请按照文档所述构建Dropdown的onChange处理程序，示例如下：

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

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

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

您可以将id道具添加到您的Dropdown：

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

现在，该组件在前面提到的span标记中为您生成一个新id，您可以通过调用

返回"JobPlanDD-option"的evt.target.querySelector('span').id;我们将使用它作为state的key.

所以你的selectedKey应该是：

selectedKey={(this.state["JobPlanDD-option"]) ? (this.state["JobPlanDD-option"]).key : undefined}

这条线的作用是：我们有JobPlanDD-option进入状态吗？ 如果是，我们会将JobPlanDD-option项的密钥传递给selectedKey，如果没有，我们将传递undefined。

像这样构建共享处理程序：

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调用它的方式：

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

现在，文本字段和下拉列表都应使用此共享处理程序。