React组件中onSubmit与onChange函数未触发的问题求助

问题描述 #

以下是我的React组件代码，点击「Save Update」按钮时表单未提交，updateSubmit函数不执行；同时input元素的onChange函数也未触发：

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>
    )
}

排查思路 #

• JSX语法错误：返回的JSX使用了HTML实体<和>，React无法将其解析为有效的DOM元素，导致事件绑定完全失效。
• 按钮类型缺失：表单内的按钮默认type="button"，不会触发表单的onSubmit事件。
• 原生DOM操作风险：直接用document.getElementById修改innerHTML会破坏React虚拟DOM的状态管理，可能引发后续异常。

解决方案 #

核心修正点 #

1. 将所有HTML实体<替换为<，>替换为>，让React正确解析JSX。
2. 给提交按钮添加type="submit"属性，确保点击时触发onSubmit。
3. 用React状态控制提示信息的显示，替代原生DOM操作。

修正后的代码 #

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

export function UpdateData(props) {
    const [name, setName] = useState(props.usersData.name);
    const [age, setAge] = useState(props.usersData.age);
    const [city, setCity] = useState(props.usersData.city);
    const [status, setStatus] = useState(null); // 新增状态管理提示信息

    const updateSubmit = (e) => {
        e.preventDefault();
        const url = `http://localhost:8000/update/${props.usersData._id}`;
        axios.put(url, { name, age, city })
            .then((res) => {
                console.log(res);
                setStatus({ type: 'success', message: 'Data updated successfully.' });
            })
            .catch((err) => {
                console.log(err);
                setStatus({ type: 'error', message: `Sorry some Error occurred !! Error: ${err.message} !!` });
            });
    };

    return (
        <div>
            <div className="updateForm">
                {/* 显示状态提示 */}
                {status && (
                    <div className={`text-${status.type}`}>
                        <h2>{status.message}</h2>
                    </div>
                )}
                <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
                        />
                    </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)}
                        />
                    </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)}
                        />
                    </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)}
                        />
                    </div><br />
                    <div>
                        <button type="submit" className="btn" id="myButton2">Save Update</button>
                    </div>
                </form>
            </div>
        </div>
    );
}

额外优化说明 #

• 用const替代let声明状态和函数，符合React最佳实践。
• 简化axios请求的参数传递，使用对象简写语法。
• 错误提示中使用err.message替代直接拼接err，避免显示冗余的错误对象信息。

内容的提问来源于stack exchange，提问作者SOHAM HAZRA