是否可以控制不可控制的输入文本？ - 反应

Question

当用户从材料UI库的 SelectField下拉菜单中选择项目时，我从状态设置输入文本值，但是当它设置时，输入文本变得不可更改，我需要的是当

这是图像; （在从SelectField下拉菜单中选择项目之前）

从下拉菜单中选择项目后

所有填写的输入文本现在都变得不可更改，空的输入文本仍然可以更改，因为它们不会从州获取值。

以下是代码;

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

我的州;

state = {
  deviceId: null,
};

当用户从下拉列表中选择一个项目时，我设置了输入文本;

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

尝试将此方法添加到您的课程中：

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

并将其添加到您的输入组件：

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