在语义UI React的下拉列表中以编程方式选择项目

您可以使用 state 为此。

我假设您有另一个组件正在渲染 Foo 组件(因为您将其代码粘贴为无状态函数)

1. 使用 onChange 在您的 Dropdown 组件,以便跟踪当前值。您是否需要更多关于如何 onChange公司 工厂检查其 docs .

例如:

const Foo = (onChange, value) => (
  <Dropdown
    placeholder='color'
    search
    selection
    options={colorOptions}
    onChange={onChange}
    value={value}
  />
)

2. 在每个 onChange公司 ,将此值保存到状态,并保留前一个值的副本。自从 setState 是 asynchronous 您可以通过以下方式轻松完成此操作:

例子:

handleChange(event, data) {
  this.setState(prevState => ({
    previousValue: prevState.value,
    value: data
  }))
}

3. 单击“取消”按钮时,只需将下拉列表的值还原为上一个值即可。

例子:

onCancel() {
  this.setState(prevState => ({
    value: prevState.previousValue
  }))
}

4. 在…上 render 始终通过 value 到 Foo公司 组成部分

例子:

<Foo onChange={handleChange} value={this.state.value} ... />