反应 - 更新<select>时<option>更新

Question

我制作了一个简单的组件，用REST或本地数组中的条目数组填充<select>。代码使用如下：

<ComboBox id="TestAsync" label="Country List" default="DE" onChange={this.change}>
<DataSource source="/api/region/country" idField="id" captionField="name" />
</ComboBox>

<ComboBox>基本上是一个带有select的语句，但带有<DataSource>检测。以下是<ComboBox>渲染代码

constructor(props: IField) {
super(props);
this.state = {
value: props.default
}
}
public componentDidUpdate(prevProps: IField, prevStat: IState) {
if (prevProps.default != this.props.default) this.setState({ value: this.props.default });
}
render() {
return <div className="hx-field" id={this.props.id}>
<label>{this.props.label}</label>
<select name={this.props.id} onChange={this.onChangeSelect.bind(this)} value={this.state.value} disabled={this.props.readonly} key={this.props.id}>
{this.props.children}
</select>
</div>
}    

这是<Datasource>类：

export class DataSource extends React.Component<IDataSource, IDataSourceState> {
constructor(props: IDataSource<T>) {
super(props);
this.state = {
rawData: null,
options: [
<option value="">Loading ... </option>
]
}
}
private option(item): JSX.Element {
return <option value={item[this.props.idField]} key={item[this.props.idField]}>{item[this.props.captionField]}</option>
}
private load() {
Adapter.load(this.props)
.then(result => {
if (!result) return;
this.setState({
rawData: result,
options: result.map(x => this.option(x))
})
})
.catch(error => {
console.error("DataSource load error: Cannot load REST data");
console.error(error);
})
}
public render() {
return this.state.options;
}
}

代码正在运行，只有一个例外。我无法向它发送默认值。问题是，当<select>组件的值呈现时，数据源仍然是空的。但是，当我在填充数据源之后发送值时，代码运行良好。即从组合框中选择一个选项。

<datasource>修改时如何强制更新<select>组件？

Answer 1

一种方法是在<option>:上使用selected道具

export class DataSource extends React.Component<IDataSource, IDataSourceState> {
//    ...
private option(item): JSX.Element {
const {idField, captionField} = this.props;
const {[idField]: id, [captionField]: caption} = item;
return 
<option 
value={id} 
key={id}
selected={id===this.props.value}
>
{caption}
</option>
}

这样，我们需要将实际的value传递到DataSource，否则我们的默认值将永远不会更改：

<ComboBox id="TestAsync" label="Country List" onChange={this.changeCountryListValue}>
<DataSource source="/api/region/country" idField="id" captionField="name" selected={this.countryListValue || 'DE'} />
</ComboBox>

或者，您可以使ComboBox通过注入onLoad回调或提供selected值来修改嵌套的DataSource，就像我在上面直接做的那样。CCD_ 17和CCD_。

最后，您可以将所有加载数据从ComboBox移到父元素或某个包装器中。我宁愿采用这种方式，因为目前您的通用名为DataSource，既将数据加载又将项呈现到<option>中，这打破了单一责任原则。这可能不允许你在不同的上下文中使用它(当说你需要加载相同的数据，但显示在不同的组件中，而不是<option>(