[英]Why doesn't this select list render with the correct item selected based on the defaultValue
我有一个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
似乎设置正确所以我不明白为什么。
我究竟做错了什么?
最初安装<select>
,默认值为''
。 一旦不受控制的表单组件在DOM中,React就不会查看defaultValue
prop的更新。 在这种情况下,看起来您的目的是始终使selectedRegionId
状态与显示给用户的状态匹配,因此您可能希望将defaultValue
更改为value
并添加this.setState({selectedRegionId: regionId});
调用你的onChange处理程序; 那么你的组件状态和DOM将始终保持同步。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.