入力フィールドは編集中ではありません。入力フィールドにreactjsの入力フィールドを書き込む方法

Question

入力フィールドに小道具値を送信しています。 フィールドを編集しようとしていますが、編集中ではありません。誰 は

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を見ることができます。それは把握するのが難しい概念ではありません。