React - Get the value of an input by clicking on a button

user_13928624 0
Viewed 4718

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>
  );
}
react-dom reactjs
5 Answers

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>
    );
}
user_110402190

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>
  );
}
user_124481480

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>
  );
}
user_129171530

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)}
      />
    </>
  );
}
user_107384590 
function App() {
  const [value, setValue] = useState('');
  const [searched, setSearched] = useState('');

  return (
    <div className="App">
      <label>Search here</label>
      <div>
        <input type="text" onChange={e=>setValue(e.target.value)} />
        <button onClick={()=>setSearched(value)}>search</button>
      </div>
      <h1>Search Result: {searched}</h1>
    </div>
  );
}
user_155601630
Related