CODEWITHSUNDEEP
javascriptreactjs
sublime_archon
sublime_archon

Reputation: 161

Updated - Not able to press backspace after programmatically changing Input Fields

I have an element as follows : 

<SearchBar>
    <InputText
      type="search"
      placeholder="Search for tasks in the BOQ..."
      value={ taskName }
      onChange={this.handleChangeInputTaskName}
    />
</SearchBar>

I want to keep the onChange method 'handleChangeInputTaskName' in place so the user can type in whatever he wants and I am able to process the input.

However, after processing the input from the user, I also want to be able to programmatically fill in the target value for the input field. Is it possible to achieve this?

=============================================================================

I was able to able to manually fill in the input field by just setting the state of the taskName to the desired value. However now it doesn't allow me to press backspace.

Upvotes: 1

Views: 110

Answers (2)

Reedling78
Reedling78

Reputation: 433

Use the component state to persist your value. This way it stays in sync as the user changes the value.

function showYourText(e) {
  // Process
  this.setState({ taskName : e.target.value })
}

<SearchBar>
    <InputText
      type="search"
      placeholder="Search for tasks in the BOQ..."
      value={ this.state.taskName }
      onChange={(e) => showYourText(e)}
    />
</SearchBar>

Upvotes: 1

Qui-Gon Jinn
Qui-Gon Jinn

Reputation: 4398

You can do this like this:

<SearchBar>
    <InputText
      type="search"
      placeholder="Search for tasks in the BOQ..."
      value={ taskName }
      onChange={(value) => this.handleChangeInputTaskName('taskName ', value)}
    />
</SearchBar>

Upvotes: 1

Related Questions