输入字段未编辑..如何在reactjs中为输入字段编写onchange函数

Question

我将道具值发送到输入字段。我尝试编辑该字段时未编辑。如何编写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}                                                                                       

并将props复制到构造函数中的状态（仅当使用props作为初始值时，才应在构造函数中执行此操作）：

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

和

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

现在，我们将输入框设为受控元素（尽管初始值来自props）。 如果您对受控组件更感兴趣，可以查看文档 ，这不是一个很难理解的概念。