我制作了一个简单的组件来填充<select>来自 REST 或本地数组的条目数组。代码使用如下：
<ComboBox id="TestAsync" label="Country List" default="DE" onChange={this.change}>
<DataSource source="/api/region/country" idField="id" captionField="name" />
</ComboBox>
<ComboBox>基本上是一个带有选择的语句，但带有<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>组件的值呈现时，数据源仍然为空的问题。但是当我在填充数据源后发送值时，代码工作正常。即从组合框中选择一个选项。
修改<select>时如何强制更新组件<datasource>？
一种方法是使用selectedprop on <option>：
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>
}
这样我们就需要将 actualvalue传入，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来修改嵌套DataSource，就像我在上面以直接方式所做的那样。并就该营救。onLoadselectedReact.children.mapReact.cloneElement
最后，您可以将所有加载数据移出ComboBox到父元素或某个包装器。我宁愿遵循这种方式，因为目前您的通用名称DataSource加载数据和渲染项目<option>都违反了单一责任原则。这可能不允许您在不同的上下文中使用它（当您需要加载相同的数据但在不同的组件中显示时<option>）
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句