如何使用 setState() 在 React 中立即更新表单的输入文本状态

Question

const [text, setText] = useState('');

const handleTextChange = (e) => {
   setText(e.target.value);
}

// Inside a form
<input onChange={handleTextChange} value={text} type="text" />

我正在尝试做一些非常简单的事情，但无法让它正常工作。从上面的代码中，我有文本和 setText 来存储和更新状态，以及一个由输入字段的 onChange 方法调用的函数 handleTextChange。

我知道 setState() 是异步的，所以不会立即更新，但是，如果我需要立即访问更新后的结果，我该如何获取它？我读过 useEffect 钩子可以用来做这个，但我不知道我需要如何使用它。如果还有其他方法可以做到这一点，请分享。

主要objective是在用户在输入字段中输入时获取“文本状态变量的更新值”。

Answer 1

您可以使用 e.target.value 作为最新值，除非您真的想使用状态变量，然后您可以将其包装在 useEffect 中，但似乎没有必要这样做： )

你可以直接使用disabled={text.length===10}

Answer 2

我认为 useEffect 不适合您的尝试

function App({ onSubmit }) {
  const [text, setText] = React.useState("")
  return <form onSubmit={e => onSubmit(text)}>
    <input
      onChange={e => setText(e.target.value)}
      value={text}
      placeholder="enter a comment"
    />
    <button
      type="submit"
      disabled={text.length >= 10}
      children="disabled at 10 chars"
    />
    <p>{Math.max(0, 10 - text.length)} characters remaining...</p>
  </form>
}

ReactDOM.render(<App onSubmit={alert} />, document.querySelector("#app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

如何使用 setState() 在 React 中立即更新表单的输入文本状态

How to update a form's input text state immediately in React using setState()

reactjs

use-effect

use-state