输入值 onChange - React Hooks答案

【问题标题】：Input value onChange - React Hooks输入值 onChange - React Hooks
【发布时间】：2019-12-07 03:29:35
【问题描述】：

我正在尝试收集在输入框中键入的值，但是当我使用 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>

    )
}

【问题讨论】：

标签： reactjs input react-hooks onchange

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

而不是在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 已经发布了一个解决方案。

【讨论】：