反应 - 无法更新输入值中的状态

Question

我正在学习 React，我想创建一个简单的表单，输入值在用户输入后更改和更新。我有这段代码，输入值在输入时更新状态，但是当我按回车键，旧状态 returns。我做了很多谷歌搜索，但似乎无法正常工作。我已经在表单中使用提交按钮进行了尝试，但这并没有什么区别。我想让它在没有提交按钮的情况下工作，因为仅在值更改和更新 onChange 中。我没看到什么？

import React, { useState } from 'react';

function App() {
 
  const [value, setValue] = useState('John');
  
  const handleInputOnChange =(e)=> {
    setValue(e.target.value)
  };

  return (
    <div className="App">
      <form>
           <label>
               Name:
               <input value={value} onChange={handleInputOnChange}/>
           </label>
       </form>
      </div>
  );
}

export default App;

Answer 1

它的发生是因为 form 标签。每当你点击回车时，form 将默认提交并且 input 的值将返回其初始值。

有两种方法可以阻止这种情况发生。

1.) 从 App 组件中删除 form 标签。

2.) 将onSubmit 函数添加到form 以处理form 提交时如下所示。

<form onSubmit={onSubmit}>...</form>

处理form的函数如下：

const onSubmit = (e) => {
  e.preventDefault()
}

preventDefault 方法将在提交时停止 form 的 default 行为。

反应 - 无法更新输入值中的状态

react - not able to update state in input value

javascript

reactjs

react-hooks

react-state