Is it possible to control the uncontrollable input text? - React

Question

I set the input texts values from state when the user select an item from SelectField dropdown menu of Material UI library but when it sets, the input texts become unchangeable and what I need is that when the

Here is the image; (Before selecting an item from SelectField dropdown menu)

After selecting an item from dropdown;

All the filled input texts now become unchangeable, the empty ones are still changeable as they don't get the value from state.

Here are the codes;

<div className="form-group row">
  <label className="col-md-2 control-label">Device ID</label>
  <div className="col-md-10">
    <input type="text" className="form-control" id="deviceId" value={this.state.deviceId} placeholder="Device ID" ref="_deviceId" />
  </div>
</div>

My state;

state = {
  deviceId: null,
};

And I set the input texts, when the user select an item from dropdown;

saveDeviceInternal(index, value) {
      if (this.props.templatesList.length > 0){

        let deviceId = value;

        this.setState({deviceId});

      }else{
        let deviceId = this.refs._deviceId.value;

        this.setState({deviceId});

      }
    }

Answer 1

Try to add this method to your class:

handleChange(e) {
    let deviceId = e.currentTarget.id
    this.setState({deviceId: e.target.value});
  }

and add it to your input component:

<input type="text" className="form-control" onChange={this.handleChange.bind(this)} id="deviceId" value={this.state.deviceId} placeholder="Device ID"  ref="_deviceId" />