我有一个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似乎设置正确,所以我不明白为什么.
我究竟做错了什么？
