Onchange 值在反应中没有改变

Question

In the react application.

This file is gonna update the to-do list in the application

when I click on Edit button this component is pop-up the Modal.

The file name is 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>
    </>
  );
}

So I am not able to change the input field value.

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

I have done this but still I am not able to change input field value?

whats going wrong in here.

Answer 1

you shouldn't define state using props, thus you are having two different sources of truth , the onChange function should come from parent, though this is a bad practice the solution for this particular case would be

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

the reason being you are changing the description state in onChange but you are always keeping the value as description.toDo, which you are getting from parent component.

however, avoid doing this , keep a single source of truth, pass the onChange function as prop.