reactjs - 输入值 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() Hook 。

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