从select元素中获取的值超过了选项标记的值

Question

在我的react应用程序中，我有一个select标记来选择一些选项。选项是从API获取的，并映射如下所示。

<select
id="numberbase__select"
onChange={this.onSelectExistingNumberBase}>
<option selected disabled hidden>Select a number base</option>
{this.props.tenantNumberBases.NumberBases.map((value, index) => {
return (
<option value={value.uuid}>{value.numberBaseName}</option>
);
})}
</select>

为了更改此值，我使用了以下helper方法。

onSelectExistingNumberBase = (e) => {
this.setState({
existingNumberBase: e.target.value
});
}

通过这种方式，我可以获得映射数组值的uuid。但除了uuid，我还想得到numberBaseName。我试过使用e.target.id。但它没有起作用。我之所以能够得到uuid，是因为我添加了它作为option标签的值。如何获得比uuid更多的值？请帮忙。

Answer 1

您可以通过uuid轻松find所选项目：

onSelectExistingNumberBase = (e) => {
let item = tenantNumberBases.NumberBases.find(el => el.uuid === e.target.value);
this.setState({
existingNumberBase: item
});
}

或者，如果性能有问题，只需将数组索引到一个对象中，如：

// This:
let items = [
{ uuid: 1, numberBaseName: "a" },
{ uuid: 2, numberBaseName: "b" }
]
// To This:
let itemsIndexedByUUID = {
1: { uuid: 1, numberBaseName: "a" },
2: { uuid: 2, numberBaseName: "b" }
}

然后你的处理程序会更简单：

onSelectExistingNumberBase = (e) => {
this.setState({
existingNumberBase: itemsIndexedByUUID[e.target.value]
});
}

Answer 2

实现这一点的方法可能很少。但我会在这里发布帮助我的解决方案。

首先选择选项，代码如下。

<select
onChange={this.onSelectExistingNumberBase}>
<option selected disabled hidden>Select a number base</option>
{this.props.tenantNumberBases.NumberBases.map((value, index) => {
return (
<option value={value.uuid} id={value.numberBaseName}>{value.numberBaseName}</option>
);
})}
</select>

然后在onChange helper方法中，我执行了如下操作。

onSelectExistingNumberBase = (e) => {
this.setState({
existingNumberBase: e.target.value,
numberBaseName: e.target.options[e.target.selectedIndex].text,
});
}

我可以使用选定的索引获取选项，然后获取选项标记中的值。我希望这能帮助到有同样问题的人。