javascript - 表单编辑无法与 onchange 做出反应

问题描述

我正在尝试使用来自不同表的数据填充表单，并允许用户更新两者的数据。我已经在表单中填充了数据，但我无法编辑我在地图函数中调用的某些字段的数据。它不允许我更改或添加数据。请参阅表单的最后一个输入元素。

import React, { Fragment, useState, useEffect } from "react";


const ViewPt = ({ pts }) => {
    // const [description, setDescription] = useState(todo.description);
    const [name, setName] = useState(pts.name);
const [mobile, setMobile] = useState(pts.mobile);
const [email, setEmail] = useState(pts.email);
const [gender, setGender] = useState(pts.gender);
const [dob, setDob] = useState(pts.dob);
const [address, setAddress] = useState(pts.address);

const [treatment, setTreatment] = useState([]);
const [treatment_date, setTreatment_date] = useState("");
const [treatment_done, setTreatment_done] = useState("");
const [cost, setCost] = useState("");
const [paid, setPaid] = useState("");
const [next_appointment, setNext_appointment] = useState("");
const [selectedTreatment, setSelectedTreatment] = useState(false);




    //edit patient function
    const updatePatient = async(e) => {
        e.preventDefault();
        try {
            const body ={ name,email,mobile,gender,dob,address };
            const response = await fetch(`http://localhost:5000/patients/${pts.patient_id}`,{
                method: "PUT",
                headers: {"Content-Type": "application/json"},
                body: JSON.stringify(body)
            });

            window.location ="/";
        } catch (err) {
            console.error(err.message);
        }
    }

    //get treatment information
    const getTreatment = async() =>{
        try {

           const response = await fetch(`http://localhost:5000/patients/:id/treatment`)
           const jsonData = await response.json();


           setTreatment(jsonData);

        } catch (err) {
            console.error(err.message);

        }
      }
      useEffect(() => {
        getTreatment();
      },[]);



    //function for getting treatment details


    const filterTreatmentDetails =async(e) =>{

        console.log("__here__1", pts, treatment);
        try{
           const filtered = treatment.filter(t => pts.patient_id == t.patient_id);
           if (
            filtered
            && filtered.length > 0
           ) {
            setSelectedTreatment(filtered);
           }
           console.log(filtered);
           console.log("__here__2");
           return filtered;
        }
        catch (err) {
            console.error(err.message);
        }
    }




    //edit treatment function
    const updateTreatment = async(e) => {
        e.preventDefault();
        try {
            const body ={ treatment_date,treatment_done,cost,paid,next_appointment };
            const response = await fetch(`http://localhost:5000/patients/${pts.patient_id}/treatment`,{
                method: "PUT",
                headers: {"Content-Type": "application/json"},
                body: JSON.stringify(body)
            });

            window.location ="/";
        } catch (err) {
            console.error(err.message);
        }
    }

    return <Fragment>

<button type="button" class="btn btn-warning" data-toggle="modal" onClick={filterTreatmentDetails} data-target={`#view${pts.patient_id}`}>
  Edit
</button>


<div class="modal" id={`view${pts.patient_id}`}>
{/* onClick={() => setDescription(todo.description)} */}
  <div class="modal-dialog">
    <div class="modal-content">


      <div class="modal-header">
        <h4 class="modal-title">Edit Data</h4>
        <button type="button" class="close" data-dismiss="modal" >&times;</button>
      </div>

      <form className="text-left" onSubmit={updatePatient,updateTreatment}>    
      <div class="modal-body">
      <div class="form-control">
                <label for="name">Name &nbsp; </label>
                <input type="text" className="form-control" id="name" placeholder="Enter Name" value={name} onChange={e=>setName(e.target.value)}/>
                <small></small>
            </div>
            <div class="form-control" >
                <label for="gender">Gender &nbsp; </label>

                <div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="gender" id="inlineRadio1" value={gender} onChange ={e =>setGender(`m`)} />
  <label class="form-check-label" for="inlineRadio1">Male</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="gender" id="inlineRadio2" value={gender} onChange ={e =>setGender(`f`)} />
  <label class="form-check-label" for="inlineRadio2">Female</label>
</div>

                <small></small>
            </div>
            <div class="form-control">
                <label for="email">Email</label>
                <input type="text" className="form-control" id="email" placeholder="Enter Email" value={email} onChange={e=>setEmail(e.target.value)} />
                <small></small>
            </div>
            <div class="form-control">
                <label for="mobile">mobile</label>
                <input type="number" className="form-control" id="mobile" placeholder="Enter 10 digit number" value={mobile} onChange={e=>setMobile(e.target.value)}/>
                <small></small>
            </div>
            <div class="form-control">
                <label for="dob">Date of Birth</label>
                <input type="text" className="form-control" id="dob" placeholder="dob" value={dob}/>
                <input type="date" className="form-control" id="dob" placeholder="dob" value={dob} onChange={e=>setDob(e.target.value)}/>
                <small></small>
            </div>
            <div class="form-control">
                <label for="address">Address</label>
                <input type="text" className="form-control" id="address" placeholder="address" value={address} onChange={e=>setAddress(e.target.value)}/>
                <small></small>
            </div>

            {
                selectedTreatment && selectedTreatment.map(subTreatment => (
                    <div class="form-control" key={subTreatment.treatment_id}>
                        <label for="treatment">Treatment Done</label>
                        <input
                            type="text"
                            className="form-control"
                            id="treatment" 
                            placeholder="Treatment Done" 
                            value={subTreatment.treatment_done} 
                            onChange={e=>setTreatment_done(e.target.value)}


                        />
                        <small></small>
                    </div>
                ))
            }


      </div>


      <div class="modal-footer">
        <button type="button" class="btn btn-warning" data-dismiss="modal" onClick = {e => {updatePatient(e);updateTreatment(e)}}>Edit</button>
        {/* <button type="button" class="btn btn-danger" data-dismiss="modal" onClick={() => {setName(patient.name),setEmail(patient.email),setMobile(patient.mobile),setGender(patient.gender),setDob(patient.dob),setAddress(patient.address)}}>Close</button> */}
      </div>
      </form>





    </div>
  </div>
</div>
    </Fragment>
};

export default ViewPt;

据我了解，以下代码不起作用：

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

我真的很感谢你的帮助！

标签： javascriptreactjs

javascript - 表单编辑无法与 onchange 做出反应

问题描述

解决方案

推荐阅读