问不更新FluentUI组件
EN

Stack Overflow用户

提问于 2020-08-05 16:45:58

回答 1查看 903关注 0票数 0

我在Sharepoint‘ve部件中有一个FluentUI下拉组件，它的作用很奇怪，它的定义如下：

<Dropdown
  defaultSelectedKey={new Date().getMonth()}
  options={getMonthSelection()}
  styles={dropdownStyles}
  onChange={this.handleTimePeriodChange}
  selectedKey={this.state.month}
/>

当onChange事件触发时，它调用以下函数：

private handleTimePeriodChange(event, option, index) {
    this.setState({
        month: option.key
    });
}

除了下拉UI元素不改变以反映新的选择外，一切都很好。如果删除对setState()的调用，UI元素将更新以反映所选内容，但状态不会更新。

有人能看到我哪里出错了吗?如果有一种方法，我可以更新状态属性而不破坏UI元素？

reactjs

fluent-ui

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-08-06 15:00:21

问题在于下拉组件本身的定义，这是由于defaultSelectedKey属性造成的。我认为这里发生的事情是，它似乎不是为下拉列表设置一个初始值，而是将控件绑定到传递的对象上；上面代码的结果是，下拉值绑定到新的Date().getMonth()，即使selectedKey绑定到‘selectedKey’状态属性。

解决方案是在初始化时直接将defaultSelectedKey设置为state属性，然后将state属性设置为当前月份，如下所示：

<Dropdown
    defaultSelectedKey={this.state.month}
    options={getMonthSelection()}
    styles={dropdownStyles}
    onChange={this.handleTimePeriodChange}
/>

当我这样做时，下拉选择现在被绑定到state属性本身，因此对state属性的任何更改都会反映在UI元素中。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63269812

复制

相似问题

问不更新FluentUI组件
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不更新FluentUI组件EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不更新FluentUI组件
EN