React onChange事件不触发 无法修改表单input输入值如何解决

问题根因与修复方案 #

表单输入无法修改的核心问题由以下几个错误共同导致，按优先级修复即可：

1. 字段名大小写不匹配 #

最核心问题 你在useState中定义的状态键全为小写开头（比如nome、matricula），但表单元素的name属性写为大写开头（比如Nome、Matricula），onChange触发时通过e.target.name找不到对应状态键，状态根本不会更新，输入框始终绑定初始值。 需要把所有表单元素的name`属性修改为和状态键完全一致：

• 姓名输入框name改为nome
• 工号输入框name改为matricula
• 密码输入框name改为senha
• 确认密码输入框name改为confSenha
• 职能输入框name改为funcao
• 权限选择框name改为tipo_acesso

2. onChange函数语法错误 #

你写的onChange函数中存在多余的无效字符n，语法错误导致状态更新逻辑未生效，修正后的函数为：

const onChange = e => {
    setInputs({...inputs, [e.target.name]: e.target.value });
};

3. 其他兼容调整 #

• React中类名属性需要用className替代原生class，避免控制台警告
• 下拉选择框需要绑定value={tipo_acesso}属性，否则选择结果不会同步到状态
• label的for属性在React中要写为htmlFor
• onChange调用可以直接传函数引用onChange={onChange}，不需要额外套一层箭头函数

修正后完整代码 #

import { useState, Fragment } from 'react'

const CadastroColaborador = () => {
    
    const [inputs, setInputs] = useState({
        nome: "pig",
        matricula: "pig",
        senha: "",
        confSenha: "",
        funcao: "",
        tipo_acesso: ""
    })

    const {nome, matricula, senha, confSenha, funcao, tipo_acesso} = inputs

    const onChange = e => {
        setInputs({...inputs, [e.target.name]: e.target.value });
    };
    
    return (
        <Fragment>
        <div className="container-fluid">
            <div className="title-container">
                <h1 className="header">Cadastro de colaboradores</h1>
            </div>
            <div className="text-container">
                <p>Utilize esta página para cadastrar novos colaboradores</p>
            </div>
            <div className="form-container">
                <fieldset>
                    <form id='form-cadastro'>
                        <div className="form-field" id='form-field-1'>
                            <label htmlFor="nome">Nome:</label>
                            <input type="text" className="form-input" id="nome" name='nome' placeholder="Nome" value={nome} onChange={onChange} required />
                        </div>
                        <div className="form-field" id='form-field-2'>  
                            <label htmlFor="matricula">Matricula:</label>
                            <input type='text' className="form-input" id="matricula" name="matricula" placeholder="Matricula" value={matricula} onChange={onChange} required />
                        </div> 
                        <div className="form-field" id='form-field-3'>  
                            <label htmlFor="senha">Senha:</label>
                            <input type='password' className="form-input" id="senha" name="senha" placeholder="Senha" value={senha} onChange={onChange} required />
                        </div>
                        <div className="form-field" id='form-field-4'>  
                            <label htmlFor="senhaConf">Confirme a senha:</label>
                            <input type='password' className="form-input" id="senhaConf" name="confSenha" placeholder="Confirme a senha" value={confSenha} onChange={onChange} required />
                        </div>
                        <div className="form-field" id='form-field-3'>  
                            <label htmlFor="func">Função:</label>
                            <input type="text" className="form-input" id="func" name="funcao" placeholder="Função" value={funcao} onChange={onChange} required />
                        </div>  
                        <div className="form-field" id='form-field-4'>  
                            <label htmlFor="tipo-acesso">Tipo de acesso:</label>
                            <select className="form-selection" id="tipo-acesso" name='tipo_acesso' value={tipo_acesso} onChange={onChange} required>
                                <option value="">--SELECIONE--</option>
                                <option value="comum">Usuário comum</option>
                                <option value="super">Usuário administrador</option>
                            </select>
                        </div>  
                        <div className="form-btn">
                            <input type="submit" className='form-sub-btn' id='sub-btn' value='Cadastrar' />
                        </div>
                    </form>
                </fieldset>
            </div>
        </div>
        </Fragment>
    );
};

内容的提问来源于stack exchange，提问作者Thiago Salgado