Reactjs: Inject a text into React-Select Input field

Question

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?

Igorsvee · Accepted Answer · 2016-07-19 19:54:23Z

1

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

answered Jul 19, 2016 at 19:54

Igorsvee

4,2111 gold badge29 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ApathyBear Over a year ago

I did this a different way, but your way is the more appropriate way.

Collectives™ on Stack Overflow

Reactjs: Inject a text into React-Select Input field

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related