如何在React中创建的select选项中添加一个concatinate变量

Question

如果满足条件，我有一个变量可以禁用<option>。我需要将其添加到现有的React应用程序中，该应用程序具有构建选择下拉列表的功能，而我通常使用常规JS的方式在这里不适用。这看起来很简单，但显然不是因为我明显错过了什么。有什么想法吗？

async handleSomeChange() {
const nearByLocations = await getCoords(this.state.zip);
if (nearByCenters) {
let optionStatus = 'disabled';
let locations = [];
for (const [index, value] of nearByLocations.entries()) {
Object.keys(value.services).forEach(key => {
var optionStatus = (value.services[key].serviceCode === 600 ) ? "disabled" : "disabled";
});
// I need to output 'disabled' as the optionStatus here:
locations.push(<option value={value.siteID} index={index} optionStatus>{value.name}</option>)
}
this.setState({ locations: locations });
}
}

Answer 1

在react中实现类似功能的默认方法是使用<option disabled={true}>，因此在您的情况下，必须使用。

<option value={value.siteID} index={index} disabled={optionStatus}>{value.name}</option>

在您的情况下，state和setState可能会出现问题，因为您正在将JSX元素推入数组并在屏幕上呈现。首选的方法是只将像这样的对象推到数组中

{ "name" : value.name, "value": value.siteID, "index": index, "optionStatus": optionStatus} 

然后使用将它们渲染到屏幕中

{locations.map(item => (
<option value={item.value} index={item.index} disabled={item.optionStatus}>{item.name}</option>
))}