CODEWITHSUNDEEP
reactjsantd
Vegeta
Vegeta

Reputation: 119

Clear the entered text in antd search component after clicking on enter/search Icon

I am required to redirect to a specified link in a new tab with different query params.

How do I clear the input text to the search component in ant.d after clicking on Enter/Search Icon?

I tried allowClear prop but it only allows clearing of the input value triggered by a Clear icon.

Find my code below,

import { React } from 'react'
import { Input } from 'antd';

const { Search } = Input;

function SearchBar() {
    const history = useHistory();
    const onSearch = value => {
            let queryString = "q=" + value;
            window.open(`http://link?${queryString}`,"_blank");
    }
    return (
        <div>
            <p className="font-sans text-gray-700 font-semi-bold text-lg pb-6"> Help and Support</p>
            <Search className="searchBar"  placeholder="Search on documentation" onSearch={onSearch} />
        </div>
    )
}

export default SearchBar;

Please find the link to antd search component here

Upvotes: 2

Views: 6291

Answers (1)

Hafiz Muhammad Bilal
Hafiz Muhammad Bilal

Reputation: 315

You can easily achieve this by useState React Hook.

Working solution is given here

Upvotes: 1

Related Questions