HTML-Tags rendert aber funktioniert nicht in reactjs

Question

Ich habe ein Div, das auf einer booleschen Bedingung rendert durch eine Schaltfläche ausgelöst wird. Ich habe mehrere Auswahloptionen im neuen div. Das Problem ist nur die ersten Arbeiten und andere nicht.

Code Snippet:

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> 
      ); 
     } 

});

Wie im Code gezeigt, funktioniert das erste Select-Tag. Danach werden alle Tags gerendert, aber ich kann weder das Dropdown-Menü auswählen, noch kann ich den Text im Eingabe-Tag ändern.

Answer 1

Sie sollten mit onChange Ereignis zu aktualisieren gesteuertinput umgehen.

Überprüfen Sie die Dokumentation here

A gesteuert<input> hat eine value prop. Die Wiedergabe eines kontrollierten <input> spiegelt den Wert der value Prop. Wider.

und

Benutzereingabe wird

keine Auswirkung auf das gerenderte Element habe ich einen fiddle mit Ihrem Code vorgenommen haben. Sie haben einige Klammern in Ihrem Snippet verloren und sollten keine Handler an this binden, wenn Sie die Syntax React.createClass verwenden. Aber der Rest funktioniert gut.