Perché non fa questo elenco di selezione rendering con l'articolo corretto selezionato in base alla defaultValue

Question

Ho un componente ReactJS:

var RegionsList = React.createClass({ 

    handleChange: function() { 
     var regionId = this.refs.userRegions.getDOMNode().value; 
     this.props.onRegionSelected(regionId); 
    }, 

    componentDidMount: function() { 
     $.get("/translation/activeuserregions", function(result) { 
      if(this.isMounted()) { 
       this.setState({ 
        selectedRegionId: result.SelectedRegionId, 
        regions: result.Regions 
       }) 
      }  
     }.bind(this)); 
    }, 

    getInitialState: function(props) { 
     return { 
      selectedRegionId: '', 
      regions: []  
     }  
    }, 

    render: function() { 
     return (
      <div id="RegionsListForm" className="navbar-form navbar-left regions-list"> 
       <div className="input-group navbar-searchbox"> 
        <span className="input-group-addon"> 
         <span>Region</span> 
        </span> 
        <select ref="userRegions" onChange={this.handleChange} defaultValue={this.state.selectedRegionId} className="form-control valid" id="region" name="region" aria-invalid="false"> 
         {this.state.regions.map(function(region) { 
          return <option key={region.Id} value={region.Id} label={region.RegionName}>{region.RegionName}</option>   
         })}            
        </select> 
       </div> 
      </div> 
     ); 
    }, 


}) 

E sembra funzionare correttamente. Ma inizialmente non esegue il rendering con l'elemento corretto selezionato. Sebbene il defaultValue sembra essere impostato correttamente, quindi non capisco perché.

Cosa sto sbagliando?

Answer 1

Quando il <select> viene inizialmente montato, il valore predefinito è ''. Una volta che un componente di modulo non controllato si trova nel DOM, React non cerca aggiornamenti per il puntello defaultValue. In questo caso sembra che la tua intenzione sia quella di avere sempre lo stato selectedRegionId corrispondente a quanto mostrato all'utente, quindi potresti voler cambiare defaultValue a value e aggiungere una chiamata this.setState({selectedRegionId: regionId}); al tuo gestore onChange; allora lo stato del tuo componente e il DOM saranno sempre sincronizzati.