React 表单正在点击 onChange 但现有值没有改变

但我需要更改的值。否则我无法更新状态，因此无法执行编辑。请帮忙。

对于受控输入，改变的值将按字符收集到相应的状态中。以下代码执行此操作。

  let changeHandler = (event) => {
    let { value, name } = event.target;
    console.log(name, value);
    const newObj = {
      ...old,
      [name]: value,
    };
    setOld(newObj);
  };

更多信息：

优化每次击键时的重新渲染

推迟部分 UI 的重新渲染

示例代码 - 完整列表

请参阅下面附上的测试运行结果，然后尝试下面的代码。看看是否可以删除和更新字段值。该代码与您的原始代码非常相似。唯一应用的更改是在 changeHandler 中。

onChange 事件是按字符触发的，这是本例中要注意的最重要的一点，其余的代码需要进行相应的对齐。

这种基于字符的输入适用于删除和编辑。

例如，逐个删除字段名称中的字符串“book1”。

1. “Book1” - 通过删除尾随字符“1”，onChange 中收到的新值将为“book”。此值需要立即更新为 old 状态。这也会同步输入中的值，以便状态和输入将是相同的值“Book”。

2. “Book”-删除“k”-将与“Boo”同步状态和值。

3. “Boo”——删除“o”——将与“Bo”同步状态和值。

4. “Bo”——删除“o”——将与“B”同步状态和值。

5. “B”——删除“B”——将与“”同步状态和值。

现在状态已经连同视觉显示一起变为空了。

另一个例子，如果我们通过选择一次性删除整个字符串“Book1”，则事件中的改变值将为“”，这将立即设置为状态，以便输入值也将设置为“”。

请发表评论以获得进一步的帮助。

App.js

import React, { useEffect, useState } from 'react';
import { Form, Button } from 'react-bootstrap';

const EditData = () => {
  let [old, setOld] = useState({
    id: 'ab123',
    bookname: 'Book1',
    author: 'John Doe',
    price: '1,234',
  });

  let changeHandler = (event) => {
    let { value, name } = event.target;
    console.log(name, value);
    const newObj = {
      ...old,
      [name]: value,
    };
    setOld(newObj);
  };

  let submitHandler = (event) => {
    event.preventDefault();
    console.log('submitted');
  };

  return (
    <div>
      <Form onSubmit={submitHandler}>
        <Form.Group className="mb-3" controlId="booksname">
          <Form.Label>Name</Form.Label>
          <Form.Control
            type="text"
            name="bookname"
            value={old.bookname}
            onChange={changeHandler}
          />
        </Form.Group>

        <Form.Group className="mb-3" controlId="booksauthor">
          <Form.Label>Author</Form.Label>
          <Form.Control
            type="text"
            name="author"
            value={old.author}
            onChange={changeHandler}
          />
        </Form.Group>

        <Form.Group className="mb-3" controlId="booksprice">
          <Form.Label>Price</Form.Label>
          <Form.Control
            type="text"
            name="price"
            value={old.price}
            onChange={changeHandler}
          />
        </Form.Group>

        <Button variant="outline-dark" type="submit">
          Submit
        </Button>
      </Form>
    </div>
  );
};

export default EditData;

测试结果

“Book1” 编辑为“Boo”

Author 列值全部删除