爲什麼沒有這個選擇列表與選擇正確的項目渲染基礎上，默認值

Question

我有一個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> 
     ); 
    }, 


}) 

這似乎正常工作。但最初它不會選擇正確的項目進行渲染。雖然defaultValue似乎設置正確，所以我不明白爲什麼。

我在做什麼錯？

Answer 1

當初始安裝<select>時，默認值爲''。一旦不受控制的表單組件位於DOM中，React不會查看defaultValue支持的更新。在這種情況下，您的意圖是始終使selectedRegionId狀態與用戶顯示的內容匹配，因此您可能需要將defaultValue更改爲value，並將this.setState({selectedRegionId: regionId});調用添加到onChange處理程序;那麼您的組件狀態和DOM將始終保持同步。