next.js 构造“表单数据”失败：参数1不是“HTMLFormElement”类型,为什么？

bqf10yzr 于 2023-02-08 发布在其他

关注(0)|答案(1)|浏览(249)

当我运行代码时，我有这个js错误，我想把表单的值保存在数据中。

- 未处理的运行时错误TypeError：构造"表单数据"失败：参数1不是"HTMLFormElement"类型。**

我在这段代码中使用了formData

const handleSubmit = (e) => {
    e.preventDefault();
    console.log(e.target);
    var data = new FormData(e.target);

并像这样呈现代码

<form className='signup-form' onSubmit={handleSubmit}>
                            <div className='form-group'>
                                <label>{translations[language]['g29']}*</label>
                                <input
                                    type='text'
                                    className='form-control'
                                    placeholder={translations[language]['g91']}
                                    id='name'
                                    required={true}
                                    name='name'
                                    data-error='Please enter your name'
                                />
                            </div>
                            <div className='form-group'>
                                <label>{translations[language]['g61']}*</label>
                                <input
                                    type='text'
                                    className='form-control'
                                    placeholder={translations[language]['g92']}
                                    id='surname'
                                    required={true}
                                    name='surname'
                                    data-error='Please enter your Surname'
                                />
                            </div>

                            <div className='form-group'>
                                <label>{translations[language]['g24']}*</label>
                                <input
                                    type='email'
                                    className='form-control'
                                    placeholder={translations[language]['g42']}
                                    id='email'
                                    required={true}
                                    name='email'
                                />
                            </div>

                            <div className='form-group'>
                                <label>{translations[language]['g43']}*</label>
                                <input
                                    type='password'
                                    className='form-control'
                                    placeholder={translations[language]['g44']}
                                    id='password'
                                    required={true}
                                    name='password'
                                />
                            </div>
                            <div className='form-group'>
                                <label>{translations[language]['g43']}*</label>
                                <input
                                    type='password'
                                    className='form-control'
                                    placeholder={translations[language]['g93']}
                                    id='passwordControl'
                                    required={true}
                                    name='passwordControl'
                                />
                            </div>
                            <div className='form-group'>
                                <label>{translations[language]['g94']}</label>
                                <div style={{ display: 'flex' }}>
                                    <div style={{ marginRight: '8px', display: 'flex', alignItems: 'center' }}>
                                        <input
                                            type='radio'
                                            style={{ marginRight: 6 }}
                                            //className={styles.check_input}
                                            name='gender'
                                            id="female"
                                            required={true}
                                        />
                                        <div>{translations[language]['g95']}</div>
                                    </div>

                                    <div style={{ marginRight: '8px', display: 'flex', alignItems: 'center' }}>
                                        <input
                                            type='radio'
                                            style={{ marginRight: 6 }}
                                            // value={!gender}
                                            //className={styles.check_input}
                                            name='gender'
                                            id="male"
                                            required={true}
                                        />
                                        <div>{translations[language]['g96']}</div>
                                    </div>
                                    <div style={{ display: 'flex', alignItems: 'center' }}>
                                        <input
                                            type='radio'
                                            style={{ marginRight: 6 }}
                                            // value={!gender}
                                            //className={styles.check_input}
                                            name='gender'
                                            id="other"
                                            required={true}
                                        />
                                        <div>{translations[language]['g97']}</div>
                                    </div>
                                </div>
                            </div>
                           
         
              <button onClick={handleSubmit} type='submit' className='btn btn-primary'>
                {translations[language]['g53']}
              </button>
              <Link href='/'>
                <a className='return-store'>{translations[language]['g51']}</a>
              </Link>
            </form>

当我按下注册按钮时出现错误，但找不到原因。

next.js

来源：https://stackoverflow.com/questions/75376955/failed-to-construct-formdata-parameter-1-is-not-of-type-htmlformelement-why

1条答案

按热度按时间

bvjveswy1#

如错误中所述，参数必须是HTMLFormElement的示例。在React中获取表单示例的简单方法是使用useRef。

import{ useRef } from 'react';

const Form = () => {
  const formRef = useRef(null);

  const handleSubmit = async (e) => {
    e.preventDefault();
    const form = formRef.current;
    if(!form) return false;
    const formData = new FormData(form); 
    console.log(formData);
  }

  return (
    <form ref={formRef} onSubmit={handleSubmit}>
      <input type="text" name="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

赞(0）回复(0）举报 2023-02-08

我来回答

next.js 构造“表单数据”失败：参数1不是“HTMLFormElement”类型,为什么？

1条答案

相关问题

热门标签

最新问答