如何禁用已从下拉列表中选择的选项?

Question

在一个使用andd库的React项目中，我从json数据中创建了一个选项列表，该列表以下拉列表的形式填充。下面是引用

的代码json数据

const newData = [
{
id: 123,
name: "Vijay"
},
{
id: 345,
name: "Sanket"
},
{
id: 546,
name: "Hitesh"
},
{
id: 789,
name: "Sameer"
},
{
id: 421,
name: "Akshay"
}
];

这些数据在<Select/>

中使用

<h2>Data 1</h2>
<Select
onChange={(key, val) => handleOnValuesChange(key, val)}
placeholder="Select any one"
style={{ width: 120 }}
options={newData.map((_) => ({
label: _.name,
value: _.id
}))}
bordered={false}
/>
<br />
<h2>Data 2</h2>
<Select
onChange={(key, val) => handleOnValuesChange(key, val)}
placeholder="Select any one"
style={{ width: 120 }}
options={newData.map((_) => ({
label: _.name,
value: _.id
}))}
bordered={false}
/>

onChange函数

const handleOnValuesChange = (key, val) => {
const allData = newData.map((data) => {
if (data.id === val) {
return {
...data,
disabled: true
};
} else {
return {
...data,
disabled: false
};
}
});
console.log("NEW DATA", allData);
};

当Vijay和Akshay被选中时，我期望数据为

0: {id: 1, value: "Vijay", disabled: true } 
1: {id: 2, value: "Sanket", disabled: false}
2: {id: 3, value: "Hitesh", disabled: false }
3: {id: 4, value: "Sameer", disabled: false }
4: {id: 5, value: "Akshay", disabled: true }

但输出为

0: {id: 1, value: "Vijay", disabled: false } {/* This disabled should change to true */}
1: {id: 2, value: "Sanket", disabled: false}
2: {id: 3, value: "Hitesh", disabled: false }
3: {id: 4, value: "Sameer", disabled: false }
4: {id: 5, value: "Akshay", disabled: true }

如何解决?如有任何合适的解决方案，我们将高度赞赏

codesandbox链接如下:https://codesandbox.io/s/bordered-less-antd-4-17-0-alpha-7-forked-wtur0

Answer 1

应该将newData存储在一个状态中，以便实现已选择选项的禁用。这是因为只有当props或state更新时，DOM才会被重新渲染。

所以在你的代码中，因为数据没有以任何状态存储，所以它不会改变非聚焦选项，一旦聚焦选项被改变。

我对代码做了一些更改，并在沙箱中添加了工作示例。

const [data, setData] = React.useState(updatedData); //store the newData with disabled added
const [prevKey, setPrevKey] = React.useState(null); //store the last changed option

const handleOnValuesChange = (key, val) => {
const updating = [...data];
setPrevKey(val.value);
data.map((d, i) => {
if (d.id === val.value) {
updating[i] = {
...d,
disabled: true
};
}
if (d.id === prevKey) { //this toggles the previous selected value to false
updating[i] = {
...d,
disabled: false
};
}
});
setData(updating);
};

.....
<Select
onChange={(key, val) => handleOnValuesChange(key, val)}
placeholder="Select any one"
style={{ width: 120 }}
options={data
.filter((d) => d.disabled === false) //this shows only the options that are not disabled
.map((_) => {
console.log(_.name)
console.log(_.id)
return({
label: _.name,
value: _.id
})})}

Answer 2

您总是使用基本newData元素。因此，在每次调用handleOnValuesChange时，您没有将值设置为禁用

您需要更新newData或使用其他临时变量。

also value是andd select使用的onChange的第一个参数。

let newData = [
{
id: 123,
name: "Vijay",
disabled: false,
},
{
id: 345,
name: "Sanket",
disabled: false,
},
{
id: 546,
name: "Hitesh",
disabled: false,
},
{
id: 789,
name: "Sameer",
disabled: false,
},
{
id: 421,
name: "Akshay",
disabled: false,
}
];
const handleOnValuesChange = (val) => {
console.log("VAL", val);
newData = newData.map((data) => {
console.log(data, val);
if (data.id === val) {
return {
...data,
disabled: true
};
}
return data;
});
console.log("NEW DATA", newData);
};

Answer 3

我检查了沙箱代码，发现您的代码存在多个问题。

1. 你必须用更新值来改变newData的值，否则会导致渲染数据老化。
2. 你必须比较if (data.id === val.value)而不是if (data.id === val)在handleOnValuesChange函数
3. 你只需要返回else部分的数据。

你可以在Sandbox上检查修改后的实现

如果你使用newData的状态，那就太好了