我叫了一個物件data，并已顯示值option在select現在我想說明selected通過選擇selected物件，但沒有成功：
let data = [
{id: 1, name: 'xxx'},
{id: 2, name: 'yyy'},
{id: 3, name: 'zzz'},
{id: 4, name: 'sss'},
{id: 5, name: 'vvv'},
];
let selected = [
{id: 1, name: 'xxx'},
{id: 3, name: 'zzz'},
{id: 5, name: 'vvv'},
]
<select multiple={true}>
data.map(function(Creator, index){
return (
<option key={Index}>{Creator.name}</option>
)
});
</select>
我做了：
{data.map(function(Cr, In){
{selected.map(function (Creator, Index) {
return (
<option selected={Creator.name === Cr.name ? true : false} key={In}>{Cr.name}</option>
)
})}
})}
但是沒有回傳option，我想這不是最佳實踐，我該如何解決這個問題，什么是最佳實踐？
uj5u.com熱心網友回復：
不要迭代選定的物件，只需像這樣通過索引讀取它們 selected[index]
data.map(function(Creator, index){
return (
<option selected={Creator.id === selected[index].id ? true : false}>{Creator.name}</option>
)
});
uj5u.com熱心網友回復：
使用函式來遍歷的選項，并使用find檢查是否在id和name選項的選擇的陣列中的物件的相同的屬性相匹配，并使用該變數來確定選擇是否應該選擇與否。
在這個作業示例中，我已將選項/選定資料傳遞到示例組件中，并為方便起見使用選項資料設定狀態。
const { useState } = React;
function Example({ data, selected }) {
const [ options, setOptions ] = useState(data);
function getSelected() {
// Iterate over the options, and get the id, and name
return options.map(option => {
const { id, name } = option;
// `found` is a boolean depending on whether the option
// in the current iteration is in the selected array
const found = selected.find(obj => {
return obj.id === id && obj.name === name;
});
// And then we can return an option where selected
// is the result of that boolean, either true or false
return <option value={option} selected={found}>{name}</option>;
});
}
return (
<div>
<select multiple>
{getSelected()}
</select>
</div>
);
};
const data = [
{id: 1, name: 'xxx'},
{id: 2, name: 'yyy'},
{id: 3, name: 'zzz'},
{id: 4, name: 'sss'},
{id: 5, name: 'vvv'},
];
const selected = [
{id: 1, name: 'xxx'},
{id: 3, name: 'zzz'},
{id: 5, name: 'vvv'},
];
ReactDOM.render(
<Example data={data} selected={selected} />,
document.getElementById('react')
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>uj5u.com熱心網友回復：
你可以做這樣的事情，這將導致解決方案，但它會導致額外的步驟。為了避免運行額外的檢查步驟，您可以使用字典。
const addList = data.map(function (Creator, index) {
let check = false;
for (let i = 0; i < selected.length; i ) {
if (selected[i].id == Creator.id) {
check = true;
break;
}
}
return (
<option key={Creator.id} selected={check}>
{Creator.name}
</option>
);
});
下面是使用字典的
let newobj = {};
for(let i=0;i<selected.length;i ){
newobj[selected[i].id]="selected";
}
const addList = data.map(function (Creator, index) {
return (
<option key={Creator.id} selected={newobj[Creator.id]==="selected"}>
{Creator.name}
</option>
);
});
uj5u.com熱心網友回復：
這是執行此操作的最快方法。
您所需要的只是一個使用 .selectedOptions 從下拉串列中獲取選定選項的函式，這將在任何時間點回傳 HTML 標記中的所有選定選項，然后您可以使用回圈將值推送到陣列中到達您想要的答案。見下文；
export default function App() {
let data = [
{id: 1, name: 'xxx'},
{id: 2, name: 'yyy'},
{id: 3, name: 'zzz'},
{id: 4, name: 'sss'},
{id: 5, name: 'vvv'},
];
//function to get selected options
function getSelected(e){
var stdOptions = e.target.selectedOptions
var selected = []
//loop to push the selected values into an array
//note that in the HTML sections, important values have been stored in 'id' and 'value' properties, so we can get them here
for (var i =0 ; i <stdOptions.length; i ){
selected.push({
'id': stdOptions[i].id,
'name': stdOptions[i].value
})
}
console.log(selected)
}
return (
<div>
<select multiple onChange = {getSelected}>
{data.map((deet, key)=>{
return (
<option key = {key} id={deet.id} value={deet.name} > {deet.name} </option>
)
})}
</select>
</div>
)
}
uj5u.com熱心網友回復：
在資料物件中，您可以擁有一個isSelectedtype 鍵，boolean用于確定是否選擇了該選項
let data = [
{id: 1, name: 'xxx',isSelected: false},
{id: 2, name: 'yyy',isSelected: false},
{id: 3, name: 'zzz',isSelected: false},
{id: 4, name: 'sss',isSelected: false},
{id: 5, name: 'vvv',isSelected: false},
];
<select multiple={true}>
data.map(function(Creator){
return (
<option selected={creator.isSelected} key={Creator.id}>{Creator.name}</option>
)
});
</select>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/343870.html
標籤：javascript 反应 打字稿 ecmascript-6