search drop down clicked take to next page

New react developer here, english is not my mother language, i have simple antd dropdown(i know this code has some other problems but i want to fix one thing here). User should be able to write in search and then click from drop down(at the moment user can only click from dropdown and cannot search by writing) when clicked from drop down then should click button 'click me when found in search' how to have user be able to search by writing ? here is my code : https://codesandbox.io/s/basic-usage-antd4150-forked-k8q4s?file=/index.js:1407-1428 dont care about this comment in the code :' {/* when found in search i want this button take to 'onChange' address also*/} '

1 answer

  • answered 2021-05-05 11:22 rainGazer

    Referring your codesandbox ; What you are doing wrong is the onChangeHandler.

    What you need to do is that when your input changes, your changeHandler should store that change somewhere and then when button is clicked , usethe same data for next page.

    Refer below and change your changehandler. And the nextpage trigger should be bound to another function call ie. the clickhandler. The click handler should be called from the button. By doing so a user can type and search and also select from option as well.

    const [selectedValue, setSelectedValue] = useState("");
    
     const changeHandler = (value) => {
        setSelectedValue(value);
      };
    
      const clickHandler = () => {
        nextPage(selectedValue);
      };
    
     ....<button onClick={clickHandler}> ......