輸入字段在沒有編輯..如何寫入onchange函數輸入字段在reactjs

Question

Im發送道具值到輸入字段。當im試圖編輯 字段它不是正在編輯..如何編寫onchange句柄函數。任何人都可以 簡要解釋有關對照和非輸入

handleUserInput = (e) => { 
//what to do here in order to edit the input field 
} 
render() { 
    return(
     <div> 
      <div className="info"> 
       <label className="label">Store Name</label> 
       <input type="text" 
        ref="storename"                      
        className="form-control"                      
        value={this.props.storeName}                      
        placeholder="Store Name"                                           
        onChange={this.handleUserInput}                      
        disabled={this.state.disabled} 
       />         
      </div> 
     </div> 
    ); 
} 

Answer 1

更改此：

value={this.props.storeName}                      

此（否則爲輸入的值總是相同的 - 在道具接收到的值）：

value={this.state.storeName}                      

和道具複製到構造函數中的狀態（你應該做的是，在構造函數只有當你使用道具作爲初始值）：

constructor(props){ 
    super(props) 
    this.state = { 
    storeName: props.storeName 
    } 
} 

和

handleUserInput=(e)=>{ 
    this.setState({storeName: e.target.value}); 
} 

現在我們已經將輸入框設置爲一個受控元素（初始值取自道具）。如果您對控制組件更感興趣，您可以查看docs，這並不難理解。