React - 通过单击按钮获取输入的值

Question

我需要实现一个搜索输入值的搜索按钮。我知道如何向按钮添加 onClick listener（这是名称吗？），以便它 fires（是表达式吗？）一个函数。

但是在函数中，我不知道如何get输入值。

这是我得到的：

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

这是我试过的方法。我在 google 上找到的一行代码。我得到 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>
  );
}

Answer 1

我认为你的代码不像 React 代码。

React 鼓励在功能组件中使用 useState 和 useCallback。你需要使用 state 和 props 而不是 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>
    );
}

Answer 2

你可以做的是在输入上创建一个handleChange，每次输入改变，状态都会改变......所以你运行 handleSubmit，你只需要获取状态

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

Answer 3

首先将输入值设置为 query（初始值将为空，因为我们在 useState 中设置）然后在更改输入值时，我们将输入值设置为setQuery 使用 onChange 方法，现在您可以使用 query 值来搜索

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

Answer 4

您可以在输入字段和状态之间创建 two-way 数据绑定以从输入字段获取值。

您需要为此使用 value 和 onChange() 侦听器。

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

Answer 5

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

React - 通过单击按钮获取输入的值

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

reactjs

react-dom