输入字段在没有编辑..如何写入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，这并不难理解。