Reactjs: Inject a text into React-Select Input field

0
votes

I am using react-select.

Sometimes I need to update my react-select input field without interacting with the input directly (I need to inject text into it). I can't seem to find a way to do this properly with the docs.

Here is my React-Select input:

<Select name='event-title-edit'  
  className="event-title-edit" 
  ref="stateSelect" autofocus 
  optionComponent={DropdownOptions} 
  optionRenderer={this.optionRenderer}  
  onInputChange={this.handleChangeTitle} 
  options={this.state.titleResults} simpleValue 
  clearable={this.state.clearable} 
  name="selected-state"  
  value={this.state.selectedTitleValue} 
  onChange={this.handleTitleChosenEdit} 
  onClose={this.onCloseTitle} 
  searchable={this.state.searchable} />

My options are dynamically created based on the results from elastic search. Also, my label and my value are two different strings (one is an "id" and one is a "name").

I need to be able to inject a name into react-select input box. How would I be able to do this?

1
javascriptjquerynode.jsreactjsreact-select

1 Answers

1
votes

Get a ref to your select component

<Select ref="select"...

Then call it's setValue method with the new value and it will trigger the onChange event

this.refs.select.setValue("hello")