是否可以控制不可控制的输入文本？ - 阵营

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