如何在反应选择下拉列表中单击按钮添加选择？

Question

我目前正在尝试在 react-select 多输入下拉列表中获取一个反应按钮以“进行选择”。

我希望我的应用程序允许用户从下拉列表和按钮中选择项目。 但是，当单击按钮时，react-select（下拉）元素应显示按钮选择的值。 它使我的特定用例的功能更加直观。

这是我的选择（来自 react-select 模块的多下拉菜单）和按钮组件的样子：

<Select
  options={props.options}
  isMulti
  onChange={handleDropdown}
  placeholder={props.placeholder}
/>

<Button
  onClick={addSelection}
/>

这是我的功能的样子：

  const handleDropdown = (selected) =>{
  
  //Saving the array of selected items into a variable (selected_values)
  selected_values = selected
}

  const addSelection = (event) =>{
  
  //make dropdown value "car" appear as selected in select component (dropdown)
}

到目前为止，我有点失落。 我对 React 的做事方式很陌生。

我曾尝试使用 refs 来定位下拉列表，但它没有产生任何结果。 react-select 模块文档建议修改组件道具以访问它们的下拉操作，但这不适用于我的特定情况，因为我无法从外部组件（我想使用的按钮）使用它。

我感谢任何可以帮助我寻求解决方案的回应。 朝着正确的方向推动将不胜感激。

Answer 1

因此，经过一些重新考虑和评论的帮助，这是这个特定问题的解决方案：

此解决方案适用于类组件

组件标签：

<Select
  value={this.state.selectedValues}
  options={this.state.options}
  isMulti
/>

<Button
  onClick={this.addSelection.bind(this)}
  {/* Working in a class component, so "this" was added, and it was binded
      in order to be able to access it in its addSelection function */}
/>

功能：

  //Part of class component:
  addSelection () {
  this.setState({selectedValues: {value: 280, label: "Car"}})
  }

基本上，我们将下拉列表的值设置为保持在状态（ selectedValues ）内。 从那里，我们可以通过单击 Select Component 外部的按钮来修改其值。 一旦状态被修改，它们就会触发组件的重新渲染，进而更新下拉组件的值。