為什么我的“onSubmit”和“onChange”函數沒有調用反應組件？

Question

 import axios from "axios"; import {useState} from "react"; export function UpdateData(props){ let [name,setName]=useState(props.usersData.name); let [age,setAge]=useState(props.usersData.age); let [city,setCity]=useState(props.usersData.city); let updateSubmit=(e)=>{ e.preventDefault(); let url=`http://localhost:8000/update/${props.usersData._id}`; axios.put(url,{"name":name,"age":age,"city":city}) .then((res)=>{ console.log(res); document.getElementById("updateForm").innerHTML=`<div class="text-success"><h2>Data updated successfully.</h2></div>`; }) .catch((err)=>{ console.log(err); document.getElementById("updateForm").innerHTML=`<div class="text-danger"><h2>Sorry some Error occer !! Error: ${err} !!</h2></div>`; }); } return( <div> <div className="updateForm"> <form onSubmit={updateSubmit}> <div className="form-group"> <label>Your ID:</label> <input name="id" type="text" defaultValue={props.usersData._id} placeholder="Enter your name here....." autoComplete="off" className="form-control" id="id" readOnly></input> </div> <div className="form-group"> <label>Enter your name:</label> <input name="name" type="text" defaultValue={props.usersData.name} placeholder="Enter your name here....." autoComplete="off" className="form-control" id="name" onChange={(e)=>setName(e.target.value)}></input> </div> <div className="form-group"> <label>Enter your age:</label> <input name="age" type="text" defaultValue={props.usersData.age} placeholder="Enter your age here....." autoComplete="off" className="form-control" id="age" onChange={(e)=>setAge(e.target.value)}></input> </div> <div className="form-group"> <label>Enter your city:</label> <input name="city" type="text" defaultValue={props.usersData.city} placeholder="Enter your city here....." autoComplete="off" className="form-control" id="city" onChange={(e)=>setCity(e.target.value)}></input> </div><br/> <div> <button className="btn" id="myButton2">Save Update</button> </div> </form> </div> </div> ) }

當我點擊“保存更新”按鈕時，應該提交，並且這個“updateSubmit”功能應該相應地執行。 但是有些“updateSubmit”函數沒有調用。 並且元素內部的“onChange”功能也沒有執行。 請提供一些想法來幫助。 謝謝你。

Answer 1

嘗試

<button className="btn" id="myButton2" type="submit">Save Update</button>

Answer 2

您不應該在 react 中使用document.getElementById更改 html。 改為執行以下操作：

import axios from "axios";
import { useState } from "react";

export function App(props) {
  const [name, setName] = useState(props.usersData.name);
  const [age, setAge] = useState(props.usersData.age);
  const [city, setCity] = useState(props.usersData.city);
  const [success, setSucess] = useState(false);
  const [error, setError] = useState(false);

  let updateSubmit = (e) => {
    e.preventDefault();
    const url = `http://localhost:8000/update/${props.usersData._id}`;
    axios.put(url, { "name": name, "age": age, "city": city })
      .then((res) => {
        console.log(res);
        setSucess(true);
      })
      .catch((err) => {
        console.log(err);
        setError(true);
      });
  }
  return (
    <div>
      <div className="updateForm">
        {success && <div className="text-success"><h2>Data updated successfully.</h2></div>}
        {error && <div className="text-danger"><h2>Sorry some Error occer !! Error !!</h2></div>}
        {!success && !error &&
          <form onSubmit={updateSubmit}>
            <div className="form-group">
              <label>Your ID:</label>
              <input name="id" type="text" defaultValue={props.usersData._id} placeholder="Enter your name here....." autoComplete="off" className="form-control" id="id" readOnly></input>
            </div>
            <div className="form-group">
              <label>Enter your name:</label>
              <input name="name" type="text" defaultValue={props.usersData.name} placeholder="Enter your name here....." autoComplete="off" className="form-control" id="name"
                onChange={(e) => {
                  console.log(e.target.value);
                  setName(e.target.value)
                }}></input>
            </div>
            <div className="form-group">
              <label>Enter your age:</label>
              <input name="age" type="text" defaultValue={props.usersData.age} placeholder="Enter your age here....." autoComplete="off" className="form-control" id="age"
                onChange={(e) => setAge(e.target.value)}></input>
            </div>
            <div className="form-group">
              <label>Enter your city:</label>
              <input name="city" type="text" defaultValue={props.usersData.city} placeholder="Enter your city here....." autoComplete="off" className="form-control" id="city"
                onChange={(e) => setCity(e.target.value)}></input>
            </div><br />
            <div>
              <button className="btn" id="myButton2" type="submit">Save Update</button>
            </div>
          </form>
        }
      </div>
    </div>
  )
}

您還應該將按鈕設置為提交類型。

<button className="btn" id="myButton2" type="submit">Save Update</button>