大佬教程收集整理的这篇文章主要介绍了将元素添加到现有的 React DropdownButton，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我正在使用 react 和 react-boostrap。
我创建了一个下拉按钮，在渲染时里面没有 Dropdown.Item 元素。调用 useEffect 时，我试图将来自服务器的结果附加到下拉按钮中。
我的 HTML 如下：
<Container classname="mt-3">
<inputGroup>
<Dropdownbutton as={inputGroup.prepenD} title="ExisTing Label" ID="input-group-dropdown-1">
<Dropdown.Item></Dropdown.Item>
</Dropdownbutton>
<FormControl ID="nameForm" placeholder="name of person" />
<FormControl ID="labelForm" placeholder="Label: Criminal or CitiZen" />
</inputGroup>
</Container>
我添加元素的代码如下：
var dropdownItem = document.createElement("Dropdown.Item");
dropdownItem.value = JsonArraY[i];
var splitString = JsonArraY[i].split("-");
var formnameText = splitString[0].replace(' ','');
var formlabelText = splitString[1].replace(' ','');
dropdownItem.onClick = "{ChangeFormText(formnameText,formlabelText)}"
document.getElementByID('input-group-dropdown-1').append(dropdownItem)
我的问题是，Dropdownbutton 标签内没有任何元素。我曾尝试使用 INNERHTML，但它似乎覆盖了父按钮的文本字段。
我可能误解了 React 的基本元素，但一直无法通过 Google 找到解决方案。
根据您的评论，您的响应是一个数组，您可以将该数组设置为任何状态
如果您正在使用功能组件，请执行以下操作
const [dropdown,setDropdown] = React.useState([]);
// Inside your useEffect you can do something like this
useEffect(()=>{
// After your server response
setDropdown(responsE);
},[])
// Then your jsx will be like this
<DropdownButton as={InputGroup.prepenD} title="ExisTing Label" id="input-group-dropdown-1">
{dropdown.map((item,i)=><Dropdown.Item key={i}>{item}</Dropdown.Item>)}
</DropdownButton>
这只会在您的服务器响应后显示数据，所以我希望它有帮助
,您可以基于 jsx 中的模型附加元素。
const component = ({items}) => {
return (
<Container className="mt-3">
<InputGroup>
<DropdownButton as={InputGroup.prepenD} title="ExisTing Label" id="input-group-dropdown-1">
{
items.map((name,indeX) => (<DropdownButton.Item key={index}>{name}</DropdownButton.Item>))
}
</DropdownButton>
<FormControl id="nameForm" placeholder="Name of person" />
<FormControl id="labelForm" placeholder="Label: Criminal or Citizen" />
</InputGroup>
</Container>
)
}
假设 items 是要添加到下拉列表中的字符串数组
以上是大佬教程为你收集整理的将元素添加到现有的 React DropdownButton全部内容，希望文章能够帮你解决将元素添加到现有的 React DropdownButton所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。