javascript - 为什么此选择列表不使用基于 defaultValue 选择的正确项目呈现

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 就不会查看defaultValueprop 的更新。在这种情况下，您的意图似乎是始终让selectedRegionId状态与向用户显示的内容相匹配，因此您可能想要更改defaultValue并value添加this.setState({selectedRegionId: regionId});对 onChange 处理程序的调用；那么您的组件状态和 DOM 将始终保持同步。