我有一个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的更新.在这种情况下,您的目的是希望始终使selectedRegionId状态与用户显示的状态相匹配,因此您可能希望将defaultValue更改为值并添加一个this.setState({selectedRegionId:regionId});调用你的onChange处理程序;那么您的组件状态和DOM将始终保持同步.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。