Htmlタグはレンダリングされますが、反応系では機能しません

Question

ボタンをトリガーにブール条件をレンダリングするdivがあります。 新しいdivに複数の選択肢があります。問題はちょうど最初の作品と他の人はいません。

コードスニペット：

var Results = React.createClass({ 
getInitialState: function(){ 
    return { 
     partname:[], 
     moveOptions: false, 
     fromLocation:'', 
     toLocation:'', 
     moveQuantity:0 
    } 
}, 
componentWillMount:function(){ 
    var partInfo = []; 
    var count = 0; 
    //ajax calls to get partInfo 
    this.setState({ 
     partInfo:partInfo 
    }); 
}, 
showMoveOptions: function(){ 
    this.setState({moveOptions:!this.state.moveOptions}); 
}, 

movePart: function(){ 
    //ajax call 
}, 
handleQuantityChange: function(e){ 
    this.setState({ 
     moveQuantity:e.target.value 
    }); 
}, 
handleFromChange: function(e){ 
    this.setState({ 
     fromLocation:e.target.value 
    }); 
}, 
handleToChange: function(e){ 
    this.setState({ 
     toLocation:e.target.value 
    }); 
}, 

render: function() { 
    var partInfo = this.state.partInfo; 
    return(
     <div> 
     <div id="results"> 
     <br/> 
      <div className="col-sm-6"> 
       <h3>Part Name :{this.props.partname}</h3> 
       <div className="container"> 
        { 
         partInfo.map(function(l){ 
         return([ 
           <div> 
             <h3>Building: {l.building}</h3> 
             <h3>Location: {l.location}</h3> 
             <h3>Quantity: {l.qty}</h3> 
           </div> 
          ]); 
         }.bind(this)) 
        } 
       </div> 
      </div> 
      <div className="col-sm-6">   
       <button type="button" onClick={() => this.showMoveOptions()}>Move</button> 

      </div> 
     </div> 
    { this.state.moveOptions ? 
       <div> 
        <div> 
         <h3>From: </h3> 
          <select onChange={this.handleFromChange.bind(this)}> 

          partInfo.map(function(from){ 
            return(
              <option value={from.location}>{from.location}</option> 
            ) 
           } 
          </select><br/> 
         <h3>To: </h3> 
          <select onChange={this.handleToChange.bind(this)} > 

           partInfo.map(function(to){ 
            return(
              <option value={to.location}>{to.location}</option> 
            ) 
           } 
          </select><br/> 

         <h3>Quantity:</h3> 
         <input type="text" name="quantity" value={this.state.moveQuantity} onChange={this.handleQuantityChange.bind(this)}/> 

        </div> 
        <div> 
         <button type="button" onClick={() => this.movePart()}>Submit</button> 
        </div> 
       </div> : null 
       } 
       </div> 
      ); 
     } 

}）。

コードに示すように、最初の選択タグが機能します。その後、すべてのタグがレンダリングされますが、ドロップダウンメニューを選択することも、入力タグのテキストを変更することもできません。

Answer 1

onChangeを処理する必要があります。は、inputです。

チェックドキュメントhere

制御<input>はvalue小道具を持っています。制御された<input>をレンダリングするとvalueプロップの値が反映されます。

と

ユーザ入力は、私はあなたのコードでfiddleを作ったレンダリング要素

には影響しません。あなたのスニペットにいくつかの角括弧がなくなりました。React.createClass構文を使用するときは、ハンドラをthisにバインドしないでください。しかし、残りはうまくいっています。