Onchange 值在反应中没有改变答案

【问题标题】：Onchange value is not changing in reactOnchange 值在反应中没有改变
【发布时间】：2021-08-24 16:43:09
【问题描述】：

在反应应用程序中。

此文件将更新应用程序中的待办事项列表

当我点击Edit按钮时，这个组件会弹出Modal。

文件名为EditTodos.js

import React, { useState } from "react";
import { Button, Modal } from "react-bootstrap";

export default function EditTodo({ todo }) {
  const [description, setDescription] = useState(todo.description);
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  const updateDescription = async () => {
    try {
      const body = { description };
      const update = fetch(`http://localhost:3000/${todo.todo_id}`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(body),
      });
    } catch (error) {
      console.log(error.message);
    }
  };
  return (
    <>
      <Button
        variant="warning"
        onClick={handleShow}
        data-target={`#id${todo.todo_id}`}
      >
        Edit
      </Button>

      <Modal show={show} onHide={handleClose} id={`id${todo.todo_id}`}>
        <Modal.Header closeButton>
          <Modal.Title>Edit Todo</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <input
            type="text"
            className="form-control"
            value={todo.description}
            onChange={(e) => setDescription(e.target.value)}
          />
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="primary" onClick={handleClose}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

所以我无法更改输入字段的值。

onChange={(e) => setDescription(e.target.value)}

我已经这样做了，但我仍然无法更改输入字段值？

这里出了什么问题。

【问题讨论】：

value={todo.description} => value={description}
酷。这有帮助。愚蠢的错误！！！！

标签： javascript html reactjs bootstrap-4

【解决方案1】：

你不应该使用道具来定义状态，因此你有两个不同的事实来源， onChange 函数应该来自父级，虽然这是一种不好的做法，但这种特殊情况的解决方案是

          <input
            type="text"
            className="form-control"
            value={description}
            onChange={(e) => setDescription(e.target.value)}
          />

原因是您正在更改 onChange 中的描述状态，但您始终将值保留为 description.toDo，这是您从父组件获取的。

但是，避免这样做，保持单一事实来源，将 onChange 函数作为 prop 传递。

【讨论】：

很酷，有帮助。谢谢