英文:
unable to select multiple options in react-select when we use it in loop
问题
以下是您提供的内容的翻译部分：
"该表格使用静态数据循环显示，并在每一行中提供一个选择框，以选择多个选项。因此，如果我选择任何一行的选项，那么它将不显示其他选项，无法从剩余的选项中选择任何一个，甚至不可见。没有选项可供选择。我需要选择多个选项并保存整个表格。"
const [selectedOptions, setSelectedOptions] = useState([]);
const objects = [
{'id': 1, 'objectName': 'Obj1'},
{'id': 2, 'objectName': 'Obj2'},
{'id': 3, 'objectName': 'Obj3'}
];
const options = [
{'id': 1, 'attrName': 'atr1'},
{'id': 2, 'attrName': 'atr2'},
{'id': 3, 'attrName': 'atr3'}
];
const handleSelectChange = (selectedOptions, index) => {
console.log(selectedOptions, index);
setSelectedOptions((prevSelectedOptions) => {
const updatedOptions = [...prevSelectedOptions];
updatedOptions[index] = selectedOptions;
return updatedOptions;
});
};
<Table variant='simple' color='gray.500' mb='24px' border={'1px'} borderColor={borderColor}>
<Thead>
<Tr >
<Th pe='10px' borderColor={borderColor}>
<Flex
justify='space-between'
align='center'
fontSize={{ sm: "10px", lg: "12px" }}
color='gray.400'>
对象
</Flex>
</Th>
<Th pe='10px' borderColor={borderColor}>
<Flex
justify='space-between'
align='center'
fontSize={{ sm: "10px", lg: "12px" }}
color='gray.400'>
属性
</Flex>
</Th>
</Tr>
</Thead>
<Tbody >
{
objects.map((object, index) => (
<Tr key={object.id}>
<Td>{object["objectName"]}</Td>
<Td>
<Select key={object.id}
closeMenuOnSelect={false}
value={selectedOptions[index] || []}
onChange={(selectedOptions) =>
handleSelectChange(selectedOptions, index)
}
isMulti={true}
options={options}
/>
</Td>
</Tr>
))
}
</Tbody>
</Table>
希望这可以帮助您完成所需的任务。
英文:
The table is looped with static data, with one select box to select multiple options in each row. So if I select any row option, then it shows no option. unable to select any one from remaining options and not even visible. showing no option. i need to select multiple options and save the entire table.
const [selectedOptions, setSelectedOptions] = useState([]);
const objects = [
{'id':1, 'objectName':'Obj1'}
{'id':2, 'objectName':'Obj2'}
{'id':3, 'objectName':'Obj3'}
];
const options = [
{'id':1, 'attrName':'atr1'}
{'id':2, 'attrName':'atr2'}
{'id':3, 'attrName':'atr3'}]
const handleSelectChange = (selectedOptions, index) => {
console.log(selectedOptions, index)
setSelectedOptions((prevSelectedOptions) => {
const updatedOptions = [...prevSelectedOptions];
updatedOptions[index] = selectedOptions;
return updatedOptions;
});
};
<Table variant='simple' color='gray.500' mb='24px' border={'1px'} borderColor={borderColor}>
<Thead>
<Tr >
<Th pe='10px' borderColor={borderColor}>
<Flex
justify='space-between'
align='center'
fontSize={{ sm: "10px", lg: "12px" }}
color='gray.400'>
Object
</Flex>
</Th>
<Th pe='10px' borderColor={borderColor}>
<Flex
justify='space-between'
align='center'
fontSize={{ sm: "10px", lg: "12px" }}
color='gray.400'>
Attributes
</Flex>
</Th>
</Tr>
</Thead>
<Tbody >
{
objects.map((object,index)=>(
<Tr key={object.id}>
<Td>{object["objectName"]}</Td>
<Td>
<Select key={object.id}
closeMenuOnSelect={false}
value={selectedOptions[index] || []}
onChange={(selectedOptions) =>
handleSelectChange(selectedOptions, index)
}
isMulti={true}
options={options}
/>
</Td>
</Tr>
))
}
</Tbody>
</Table>
please help me to do this.
答案1
得分: 1
请检查以下代码，它可以帮助您。
您可以将 object.id 作为您的状态的键，并将数组设置为值，这可以用于循环处理具有相同选项的对象。
import React, { useState } from "react";
import Select from "react-select";
export default () => {
const objects = [
{ id: 1, objectName: "Obj1" },
{ id: 2, objectName: "Obj2" },
{ id: 3, objectName: "Obj3" }
];
const options = [
{ value: 1, label: "atr1" },
{ value: 2, label: "atr2" },
{ value: 3, label: "atr3" }
];
const [selectedOptions, setSelectedOptions] = useState({});
return (
<>
<div>
{objects.map((obj) => (
<Select
key={`obj_${obj.id}`}
isMulti
options={options}
value={selectedOptions[obj.id] || []}
onChange={(newVal) => {
setSelectedOptions((prev) => ({
...prev,
[obj.id]: newVal
}));
}}
/>
))}
</div>
</>
);
};
链接至 codesandbox
英文:
Please check the following code which can help you.
You can take object.id as key for the your state and set array as an value which can be used for your loop of objects with same options.
import React, { useState } from "react";
import Select from "react-select";
export default () => {
const objects = [
{ id: 1, objectName: "Obj1" },
{ id: 2, objectName: "Obj2" },
{ id: 3, objectName: "Obj3" }
];
const options = [
{ value: 1, label: "atr1" },
{ value: 2, label: "atr2" },
{ value: 3, label: "atr3" }
];
const [selectedOptions, setSelectedOptions] = useState({});
return (
<>
<div>
{objects.map((obj) => (
<Select
key={`obj_${obj.id}`}
isMulti
options={options}
value={selectedOptions[obj.id] || []}
onChange={(newVal) => {
setSelectedOptions((prev) => ({
...prev,
[obj.id]: newVal
}));
}}
/>
))}
</div>
</>
);
};
Link to codesandbox
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论