是否可以控制不可控制的輸入文本？ - 陣營

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