TransWikia.com

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

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>
  );
}
react domreactjs

4 Answers

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

Add your own answers!

Ask a Question

Get help from others!

Recent Answers

Recent Questions

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP