React onChange 函数没有触发，不允许我更改输入值

Question

这是我当前的 Cadastro.js 文件：

当我尝试编辑表单输入时，它会保留在我的 JS 文件中声明的“pig”值，不允许我插入或删除该值。

我已经重写了这个函数，但它不能以任何形式工作，我一定是遗漏了什么。

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

Answer 1

名称包含大写字母，因此您可以使用 name="nome" 代替 name="Nome" 或者您可以使用 e.target.id 代替 e.target.name

顺便说一下，您可以简单地写 onChange={onChange} 而不是 onChange={e => onChange(e}。

我认为这样调用 setInputs 函数也会更安全

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

Answer 2

<input type='text' class="form-input" id="matricula" name="Matricula" placeholder="Matricula" value={matricula} onChange={e => onChange(e)} required />

请注意，输入中的“名称”应与您正在更新的输入匹配。 name="matricula" 应该有效。

onChange 正在向您的对象添加如下内容：

{matricula : "", Matricula: "" }

名称应该匹配，因为您是这样更新的：

setInputs({...inputs, [e.target.name]

React onChange 函数没有触发，不允许我更改输入值

React onChange function doesn't fire, not allowing me to change input value

javascript

onchange

reactjs