时间戳

首页 > 解决方案 > 为流畅的 ui 下拉菜单创建处理程序，使用 React 状态的动态名称

javascript - 为流畅的 ui 下拉菜单创建处理程序，使用 React 状态的动态名称

问题描述

我有一个下拉菜单：

  <Dropdown
    id="JobPlanDD"
    selectedKey={(this.state["JobPlanDD-option"]) ? (this.state["JobPlanDD-option"]).key : undefined}
    placeholder="Select..."
    onChange={(e, i) => this.handleChange(e, i)} 
    options={jobPlanDDOptions}                                 
    />

而且我有一个处理该下拉菜单的处理程序以及我将来制作的任何其他内容：

 const id = evt.target.querySelector('span').id;
  const theItem = item.text;

  this.setState({ 
    [id]: theItem 

  });

对于这个特殊的下拉菜单，我被告知要JobPlanDD-option在该selectedKey属性中使用，但我不明白为什么。

由于处理程序，我设法记录了特定下拉列表的 id const id = evt.target.querySelector('span').id;

但它返回JobPlanDD-option不能是状态，因为它有连字符或减号。

有人可以向我解释这里发生了什么吗？

我已经阅读了这篇文章，虽然它描述了很多，但它并不完全适合我的问题： Reactjs setState() with a dynamic key name?

标签： javascriptreactjsstate

解决方案

需要轻推一下：正在设置动态状态，这正是我需要编写它才能使用它的方式：

console.log(this.state["JobPlanDD-option"], 'state.JobPlanDD')

盯着我的脸...

推荐阅读