在选择后动态添加组件
在选择后动态添加组件
提问于 2022-04-03 07:03:12
假设我有一个<SelectPicker/>组件，可以在其中选择一个选项。我想要的是在选择了一个选项之后，如何添加另一个<SelectPicker/>。
function DynamicComponent() {
const [state, setState] = useState([
{ name: null, id: '1' },
]);
const handleAdd = (value) => {
// Updating logic
};
return(
<>
{ state.map(item => {
return <SelectPicker
onSelect={handleAdd}
key={item.id}
value={item.name}
data={options} />
})
}
</>
);
}在上面的示例中，假设存在未选中的默认SelectPicker。在选择之后，我认为handleAdd函数应该更新id等于'1'的对象，并添加另一个类似于{ name: null, id: '2' }的对象。
在反应中实现这种功能的最佳方法是什么？任何帮助都将不胜感激。谢谢。
回答 2
Stack Overflow用户
发布于 2022-04-03 07:36:58
在抽象级别上，您要做的是在您的状态中拥有一个组件数组，然后由DynamicComponent的呈现函数调用该数组。这个数组应该立即获得它的第一个SelectPicker组件，每次调用handleAdd时，您都会使用setState函数向数组中添加一个新的SelectPicker。您可以通过查找SelectPicker来获得每个新array.length组件的id。
Stack Overflow用户
发布于 2022-04-03 08:12:11
除本问题外，以下执行部分的注释也将在下面的问题中讨论。
如果我想更新具有id:1的对象的name属性并同时添加新的对象到状态，那么
怎么办？
这可能是实现预期结果的一种可能的解决办法：
function DynamicComponent() {
const [myState, setMyState] = useState([
{name: null, id: '1'}
]);
const handleAdd = arrIdx => setMyState(prev => {
const newArr = [...prev];
prev[arrIdx]?.name = ">>>>----new name goes here---<<<<";
return [
...newArr,
{
name: null,
id: (prev.length + 1).toString()
}
]
});
return(
<div>
{myState.map((item, idx) => (
<SelectPicker
onSelect={() => handleAdd(idx)}
key={item.id}
value={item.name}
data={options}
/>
)}
</div>
);
}注意到
避免使用变量名称，如“state”iteration
- This
- 传递了来自
.map()的“索引”帮助跟踪准确的array-element
- The新元素，
name: null作为最后一个
- 添加，
id是通过将当前长度递增1H 218f 219来计算的
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71723696
复制相关文章
相似问题
腾讯云开发者
