输入值 onChange - React Hooks

Question

我试图收集在输入框中键入的值，但是当我使用 onChange 时，我只能获取之前的值。例如，在我刚刚输入 "text" 之后，要收集的最新值将是 "tex"

import React, {useState} from 'react';
import './SearchBar.css';

const SearchBar = (props) => {

    const [input, setInput] = useState('');

    const onChange = (e) => {
        setInput(e.currentTarget.value);
        console.log(input);
    }

    let sugestionList = (
        <ul>
            <li>item 1</li>
            <li>item 2</li>
        </ul>
    )



    return(
        <div className="search-bar">
            <input type="text" placeholder={props.placeholder} onChange={onChange}/>
            {sugestionList}
        </div>

    )
}

Answer 1

那是因为更新状态是一个异步任务。要获取最新状态，您可以使用 useEffect() 挂钩。

useEffect(() => {console.log("input state is", input)}, [input]) //add the state in dependency array and this useEffect will run whenever state changes//

Answer 2

发生这种情况是因为更新状态是异步的，并且您正在同一个 onChange 函数中检查 (console.log)，这就是为什么它没有提供正确的输入值但它是正确的 working/updating。

您可以在此处查看 -

而不是在 onChange 中执行控制台

const onChange = (e) => {
   setInput(e.currentTarget.value);
  }
  console.log(input)
  return(
      <div className="search-bar">
          <input type="text" placeholder={'props.placeholder'} onChange={onChange}/>
          {sugestionList}
      </div>
  )

另一个解决方案正在使用 useEffect，因为 Atin 已经发布了一个解决方案。

输入值 onChange - React Hooks

Input value onChange - React Hooks

input

onchange

reactjs

react-hooks