Parastoo Ebrahimi
4 سال پیش توسط Parastoo Ebrahimi مطرح شد
2 پاسخ

مشکل با dropdown list

سلام. من میخوام از 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}
    &#x25bc;
  </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


ثبت پرسش جدید
حسام موسوی
تخصص : طراح و برنامه نویس
@hesammousavi 4 سال پیش مطرح شد
0

سلام
ببخشید متوجه مشکلتون نشدم در اینجا ؟ مثال که بیان کننده داستان هست


Parastoo Ebrahimi
تخصص : front-end developer
@parastooebrahimi 4 سال پیش مطرح شد
0

سلام. من از onchange استفاده میکردم برای گرفتن مقدار انتخابی که متوجه شدم باید از onSelect استفاده کنم که دو تا پارامتر ورودی داره و پارامتر دوم مقدار value رو با پارامتر text میده.

 <Dropdown  onSelect={(ev,e)=>this.departmentFilterHandler(ev,e)}  >

و بعد :

 departmentFilterHandler=(ev,e)=>{

        this.setState({
            departmentFilter: e.target.text

        })

    }

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام