How to click button or link in react, javascript-CodePudding

I just want to ask how can I click the "search by parcel number" programatically using react or javascript or what language can trigger the onclick on the search by parcel number button.

CodePudding user response：

You can use useRef (if you have access to the element in your App)

// Get a hook function
const {useState, useEffect, useRef} = React;

const Example = ({title}) => {
    const [count, setCount] = useState(0);
    const buttonRef = useRef(null);
    
    useEffect(() => {
      setTimeout(() => {
        console.log("clicking with ref");
        buttonRef.current.click();
      }, 1500);
    }, []);
  
    return (
        <div>
            <p>{title}</p>
            <p>You clicked {count} times</p>
            <button ref={buttonRef} onClick={() => setCount(count   1)}>
                Click me
            </button>
        </div>
    );
};

// Render it
ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <Example title="Example using Hooks:" />
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

Alternatively, you can use all the usual methods such as:

... etc

CodePudding user response：

You use use ref.

const parcelNumberSearchRef = useRef(null);
const addressSearchRef = useRef(null);

assuming you have your component

...
<div>
    <div ref={addressSearchRef}>Search By Address</div>
    <div ref={parcelNumberSearchRef}>Search By Parcel Number</div>
</div>
...

function someFunctionToBeCalledWhenYouWantToClick(){
    parcelNumberSearchRef.current.click()
}

and that's it