我想显示图标而不是引导程序下拉切换

Question

我在React.js中使用bootstrap Dropdown，我想删除红圈区域(切换(并显示铅笔图标，只有使用才能点击它。

在此处输入图像描述

我使用以下Dropdown。

https://react-bootstrap.github.io/components/dropdowns/

React.js

return (
<>
<div className="">

<Dropdown className="room_change_dropdown_top">
<Dropdown.Toggle className='room_change_dropdown_toggle' id="dropdown-basic">
<img className="ic_edit_in_table" src={ic_edit} />

</Dropdown.Toggle>
<Dropdown.Menu className="room_change_dropdown">
<Dropdown.Item className="room_change_dropdown_item">
{roomNames.map((room_names, i) => (
<div className="flex_radio">
<input
className="room_change_radio"
type="radio"
value={room_names}
onChange={HomeHandleChange }
checked={val === room_names}
/>
<p className="drop_down_p">{room_names}</p>
</div>
))}
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
</>
);
}
export default DropDownForRoomChange;

Answer 1

基于react bootstrap中的此示例https://react-bootstrap.github.io/components/dropdowns/#custom-下拉组件：

const CustomToggle = React.forwardRef(({ children, onClick }, ref) => (
<img className="ic_edit_in_table" src={ic_edit} />
));

// ...
<Dropdown.Toggle as={CustomToggle} id="dropdown-custom-components" />

Answer 2

它工作于

const CustomToggle = React.forwardRef(({ children, onClick }, ref) => (
<a
href=""
ref={ref}
onClick={(e) => {
e.preventDefault();
onClick(e);
}}
>
{children}
<img className="ic_edit" src={ic_edit} />
</a>
));


// ...
<Dropdown.Toggle as={CustomToggle} id="dropdown-custom-components" />