سلام. من میخوام از custom drop down ای که توی react bootstrap هست استفاده کنم ولی واسم مبهمه چجوری باید ازش استفاده کنم برای onchange چون به صورت props نیستن. ممنون میشم راهنماییم کنید.
// The forwardRef is important!!
// Dropdown needs access to the DOM node in order to position the Menu
const CustomToggle = React.forwardRef(({ children, onClick }, ref) => (
<a
href=""
ref={ref}
onClick={(e) => {
e.preventDefault();
onClick(e);
}}
>
{children}
▼
</a>
));
// forwardRef again here!
// Dropdown needs access to the DOM of the Menu to measure it
const CustomMenu = React.forwardRef(
({ children, style, className, 'aria-labelledby': labeledBy }, ref) => {
const [value, setValue] = useState('');
return (
<div
ref={ref}
style={style}
className={className}
aria-labelledby={labeledBy}
>
<FormControl
autoFocus
className="mx-3 my-2 w-auto"
placeholder="Type to filter..."
onChange={(e) => setValue(e.target.value)}
value={value}
/>
<ul className="list-unstyled">
{React.Children.toArray(children).filter(
(child) =>
!value || child.props.children.toLowerCase().startsWith(value),
)}
</ul>
</div>
);
},
);
render(
<Dropdown>
<Dropdown.Toggle as={CustomToggle} id="dropdown-custom-components">
Custom toggle
</Dropdown.Toggle>
<Dropdown.Menu as={CustomMenu}>
<Dropdown.Item eventKey="1">Red</Dropdown.Item>
<Dropdown.Item eventKey="2">Blue</Dropdown.Item>
<Dropdown.Item eventKey="3" active>
Orange
</Dropdown.Item>
<Dropdown.Item eventKey="1">Red-Orange</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>,
);
این هم لینکش برای دیدن نتیجه
https://react-bootstrap.github.io/components/dropdowns/#custom-dropdown-components
@hesammousavi
@sinashahoveisi
سلام. من از onchange استفاده میکردم برای گرفتن مقدار انتخابی که متوجه شدم باید از onSelect استفاده کنم که دو تا پارامتر ورودی داره و پارامتر دوم مقدار value رو با پارامتر text میده.
<Dropdown onSelect={(ev,e)=>this.departmentFilterHandler(ev,e)} >
و بعد :
departmentFilterHandler=(ev,e)=>{
this.setState({
departmentFilter: e.target.text
})
}
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟