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

Question

I am currently trying to get a react button to "make a selection" in a react-select multi input dropdown.

I want my application to allow users to select items from both the drop-down and through the button. When the button is clicked however, it the react-select (dropdown) element should show the value selected by the button. It makes functionality more intuitive for my specific use case.

This is what my select (multi-dropdown from react-select module) and button components look like:

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

<Button
  onClick={addSelection}
/>

This is what my functions look like:

  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)
}

So far, I am kind of lost. I'm pretty new to the React way of doing things.

I have tried using refs in order to target the dropdown, but it doesnt yield any results. The react-select module documentation reccomends modifying component props in order to access their dropdown actions, but this doesnt work for my particular case, as I cant use it from an external component (the button I want to use).

I appreciate any response that may help me work towards a solution. A push in the right direction would be appreciated.

Answer 1

So, after some reconsideration and some help from the comments, this is the solution to this particular problem:

This solution is for a class component

Component tags:

<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 */}
/>

Function:

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

Basically, we are setting the value of the dropdown to be held inside a state ( selectedValues ). From there, we can modify its value through the click of a button external to the Select Component. Once states are modified, they trigger a re-render of components, which in turn updates the value of the dropdown component.