onSubmit React js 问题

Question

我在使用 React JS 时遇到了问题。

我有一个表单，用户必须选择一些选项，然后写一个数字，当用户按下名为“Consultar”的按钮或按“Enter”（介绍）时，它应该发送表单并显示包含必要信息的表格。

但是，当用户按“Enter”键时，表单信息不会提交，唯一的方法是按名为“Consultar”的按钮。我尝试过使用 onKeyPress 但没有成功。

难道是一些反应错误导致了问题，而不是我的代码？如果它不是我的代码中的内容，我需要的是用户可以按“Enter”并且它执行与“Consultar”按钮相同的功能。

请帮忙，我对 React JS 的世界很陌生。这是代码：

const DataForm = ({
  update,
  setIsLoaded,
  setError,
}) => {
  const formatChars = { C: '[1-9]', L: '[0-9]', Z: '[0-9]?' };
  const [tipoCedula, setTipoCedula] = useState('1');
  const [tipoBusqueda, setTipoBusqueda] = useState('1');
  const [numCedula, setNumCedula] = useState('');
  const [emailAddress, setEmailAddress] = useState('');

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    tipoCedula,
    tipoBusqueda,
    numCedula,
    emailAddress,
  });

  const getNumCedulaMask = (pTipoCedula) => {
    if (pTipoCedula === '2') return 'C-LLL-LLLLLL';
    if (pTipoCedula === '3') return 'CLLLLLLLLLLZ';
    if (pTipoCedula === '4') return 'CLLLLLLLLL';

    return 'C-LLLL-LLLL';
  };

  const getRegExFromMask = (pMask, pFormatChars) => {
    let returnValue = pMask;

    Object.keys(pFormatChars).map((item) => {
      if (typeof returnValue.replaceAll === 'function') {
        returnValue = returnValue.replaceAll(item, pFormatChars[item]);
      }
      return returnValue;
    });
    return new RegExp(`^${returnValue}$`);
  };

  const numCedulaMask = getNumCedulaMask(tipoCedula);
  const numCedulaRegEx = getRegExFromMask(numCedulaMask, formatChars);
  const emailRegEx = '^[_a-z0-9-]+(.[_a-z0-9-]+)*@[a-z0-9-]+(.[a-z0-9-]+)*(.[a-z]{2,4})$';

  const isValidNumCedula = (inputValue) => {
    const replace = inputValue.replace('_', '');
    if (replace.match(numCedulaRegEx)) {
      return true;
    }
    return 'El formato no es válido';
  };

  const isValidEmail = (inputValue) => {
    if (inputValue.match(emailRegEx)) {
      return true;
    }
    return 'El formato no es válido';
  };
  const onSubmit = async (data) => {
    let searchParameter = '';

    if (data.tipoBusqueda === '1') {
      searchParameter = data.numCedula;
    } else {
      searchParameter = data.emailAddress;
    }
   
    const { ssoBaseUrl } = some restricted information
  
    const apiCall = some restricted information
    
    const requestOptions = {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
    };
    setIsLoaded(true);
    try {
      const result = await fetch(apiCall, requestOptions);
      const datos = await result.json();
      setIsLoaded(false);
      update('reminderResult', datos);
    } catch (e) {
      setError(true);
    }
  };

  return (
    <div>
      <form onSubmit={handleSubmit(onSubmit)} id='formulario' data-testid='formulario-busqueda'>
        <div className='form-group group_TIPO_BUSQUEDA'>
          <label className='label'>Buscar por</label>
          <div>
            <select data-testid="search-type"
              className='form-control select TIPO_BUSQUEDA'
              {...register('tipoBusqueda')}
              defaultValue={tipoBusqueda}
              onChange={(e) => (setTipoBusqueda(e.target.value))}
            >
              <option value='1'>Tipo de cedula</option>
              <option value='2'>Email</option>
            </select></div>
        </div>

        {tipoBusqueda === '1' && <div className='form-group group_TIPO_CEDULA'>
          <label htmlFor='tipoCedula' className='label'>Tipo de cédula</label>
          <div>
            <select data-testid="cedula-tipo-id"
              className='form-control select TIPO_CEDULA'
              {...register('tipoCedula')}
              defaultValue={tipoCedula}
              onChange={(e) => (setTipoCedula(e.target.value))}
            >
              <option value='1'>Cédula Persona Física</option>
              <option value='2'>Cédula Persona Jurídica</option>
              <option value='4'>Número Identificación Tributario Especial (NITE)</option>
              <option value='3'>Documento Identificación Migratorio Extranjeros</option>
            </select>
            {errors.tipoCedula && <p className='error-message'>{errors.tipoCedula.message}</p>}
          </div>
        </div>
        }

        {tipoBusqueda === '1' && <div className='form-group group_NUM_CEDULA'>
          <label htmlFor='numCedula' className='label'>Cédula</label>
          <div>
            <InputMask data-testid="num-cedula"
              className='form-control NUM_CEDULA input'
              {...register('numCedula', {
                required: {
                  value: true,
                  message: 'Este campo es requerido',
                },
                validate: {
                  validValue: isValidNumCedula,
                },
              })}
              formatChars={formatChars}
              onChange={(e) => (setNumCedula(e.target.value))}
              value={numCedula}
              mask={numCedulaMask}
            />
            {errors.numCedula && <p className='error-message' role="alert">Formato cédula incorrecto</p>}
          </div>
        </div>}

        {tipoBusqueda === '2' && <div className='form-group'>
          <label htmlFor='emailAddress' className='label'>Dirección de correo electrónico</label>
          <div>
            <input type="text"
              data-testid="emailAddress"
              className="form-control"
              value={emailAddress}
              {...register('emailAddress', {
                required: 'Este campo es requerido',
                validate: {
                  validValue: isValidEmail,
                },
              })}
              onChange={(e) => (setEmailAddress(e.target.value))}
            />
            {errors.emailAddress && <p className='error-message' role="alert">{errors.emailAddress.message}</p>}
          </div>
        </div>}

        <div className='form-group'>
          <button className='btn-submit float-right' type="submit" data-testid="button-ask">CONSULTAR</button>
        </div>
      </form>
    </div>
  );
};

DataForm.propTypes = {
  update: PropTypes.func.isRequired,
  setIsLoaded: PropTypes.func.isRequired,
  setError: PropTypes.func.isRequired,
};

export default DataForm;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

我没有尝试你的代码，但我看到了你的代码，我在这里找到了一些东西。您必须在 onSubmit 中写入箭头函数。

<form onSubmit={() => handleSubmit(onSubmit)} id='formulario' data-testid='formulario-busqueda'>

如果您的页面在提交时刷新，那么您必须编写 event.preventDefault() onSubmit。

<form onSubmit={(event) => {
       event.preventDefault();
       handleSubmit(onSubmit);
 } id='formulario' data-testid='formulario-busqueda'>

Answer 2

以下是如何使用 Enter 键提交表单的代码示例：

import React, { useState } from 'react';

export default function App() {
  const [name, setName] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('form submited');
  };

  return (
    <div>
      <form onSubmit={handleSubmit} >
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </form>
    </div>
  );
}


....

Answer 3

您没有handleSubmit 函数，您拥有的是onSubmit 函数。因此，在您的 onSubmit 事件侦听器中，您试图调用一个不存在的函数

<form onSubmit={handleSubmit(onSubmit)}...

这就是您应该如何调用 onSubmit 函数

<form onSubmit={onSubmit}...