0

我在 Sharepoint webpart 中有一个FluentUI Dropdown 组件，它的行为很奇怪，它的定义如下：

<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 元素的情况下更新状态属性？

4

1 回答 1

0

问题出在 Dropdown 组件本身的定义中，并且是由于 defaultSelectedKey 属性造成的。我认为这里发生的事情不是为下拉菜单设置初始值，而是似乎将控件绑定到传入的对象；上面代码中的结果是 Dropdown 值绑定到 new Date().getMonth()即使selectedKey 绑定到“月”状态属性。

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

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

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

于 2020-08-06T15:00:21.413 回答