Stack Overflow Asked by MrFacundo on January 4, 2021
I need to implement a search button that searches the value of an input. I know how to add an onClick listener
(is that the name?) to the button so that it fires
(is that the expresion?) a function.
But within the function, I don’t know how to get
the input value.
Here’s what I got:
function App() {
const [query, setQuery] = useState('')
const [page, setPage] = useState(1)
const { jobs, loading, error } = useFetchJobs(query, page)
function handleSearch(e) {
setQuery(???)
setPage(1)
}
return (
<Container className="my-4">
<input type="text"></input>
<button onClick={handleSearch}>search</button>
</Container>
);
}
Here’s what I’ve tried. A line of code I found on google. I get Error: Function components cannot have string refs
function App() {
function handleSearch(e) {
setQuery(React.findDOMNode(this.refs.search).value.trim())
setPage(1)
}
return (
<Container className="my-4">
<input type="text" ref="search" ></input>
<button onClick={handleSearch}>search</button>
</Container>
);
}
What you can do is to create a handleChange
on input, and every time the input changes, the state changes... so on you run the handleSubmit
, you only have to get the state
function App() {
const [inputValue, setInputValue] = useState('')
function handleSearch(e) {
// here you can get the inputValue
DoWhateverIWantWithSearchValue(inputValue)
}
return (
<Container className="my-4">
<input type="text" handleChange={(e) => setInputValue(e.target.value)} ></input>
<button onClick={handleSearch}>search</button>
</Container>
);
}
Correct answer by Zinho on January 4, 2021
You can create a two-way data bind between the input field and the state to get the value from the input field.
You need to use value
and onChange()
listener for this.
import React, { useState } from "react";
export default function App() {
const [query, setQuery] = useState("");
console.log(query);
return (
<>
<input
type="text"
name="query"
className="input"
placeholder="Search for something"
value={query}
onChange={e => setQuery(e.target.value)}
/>
</>
);
}
Answered by BLelouch on January 4, 2021
First set the value of the input to query
(initial value will be null as we set that in useState
) then on changing the value of the input we set value of the input to setQuery
using onChange method, now you can use the query
value to search
function App() {
const [query, setQuery] = useState('')
const [page, setPage] = useState(1)
const { jobs, loading, error } = useFetchJobs(query, page)
function handleSearch(e) {
\**write your search function here with query value**
}
return (
<Container className="my-4">
<input value={query} onChange={(e)=>setQuery(e.target.value)} type="text"></input>
<button onClick={handleSearch}>search</button>
</Container>
);
}
Answered by KALITA on January 4, 2021
I think your code is not like as React
code.
React encourage use useState
and useCallback
in Functional component. And you need to use state
and props
than ref
import { useCallback, useState } from "react"
function App() {
const [query, setQuery] = useState('')
const [page, setPage] = useState(1)
const { jobs, loading, error } = useFetchJobs(query, page)
const handleSearch = useCallback((e) {
/** You can access query in this function */
setPage(1)
},[query])
const onChangeQuery = useCallback((event)=>{
setQuery(event.target.value)
},[])
return (
<Container className="my-4">
<input type="text" value={query} onChange={onChangeQuery} />
<button onClick={handleSearch}>search</button>
</Container>
);
}
Answered by Stark Jeon on January 4, 2021
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP