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}

到此（否则输入的值总是相同的 - 在props中收到的值）：

value={this.state.storeName}

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

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

和

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

现在我们已经将输入框设置为受控元素（虽然从道具获取初始值）。如果您对受控组件感兴趣，可以查看docs，这是一个难以理解的概念。

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

1 个答案: