在使用 antd 庫的 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 }
如何解決這個問題？高度贊賞任何適當的解決方案
這是代碼和框鏈接：https ://codesandbox.io/s/bordered-less-antd-4-17-0-alpha-7-forked-wtur0
uj5u.com熱心網友回復：
您始終使用基本的 newData 元素。所以在每次呼叫 handleOnValuesChange 時，您都沒有將值設定為禁用。
您需要更新 newData 或使用其他一些臨時變數。
value 也是 antd 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);
};
uj5u.com熱心網友回復：
我檢查了沙箱代碼，發現您的代碼存在多個問題。
- 您必須
newData使用更新值更改該值，否則它將舊資料用于渲染。 - 您必須比較
if (data.id === val.value)而不是if (data.id === val)在 handleOnValuesChange 函式中。 - 您只需回傳其他部分的資料。
您可以在Sandbox上檢查修改后的實作
如果您將狀態用于 newData
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/338452.html
標籤：javascript 反应