防止默认情况下不处理表单提交

Question

试图阻止表单提交时的默认设置，尽管它会继续提交用户输入--如果我的表单上的提交值为空，那么表单将阻止默认。有解决办法吗？

下面是我的表单；on submit是空的，因为它防止默认值为空。虽然它应该会生成如下所示的..。

​

              <form className='grid' onSubmit={}>
                <div className='flex'>
                  {/* <InputField
                    isRequired={true}
                    id='productNameField'
                    required={true}
                    className='border-solid border-2 border-gray-200 pl-3 w-full rounded-lg h-full'
                    type='text'
                    placeholder='Spotify'
                    label='Product Name'
                    onChange={onSetProductName}
                  /> */}

                  <div className=' relative '>
                    <label className='text-gray-700'>
                      Product Name
                      <span className='text-red-500 required-dot'>*</span>
                    </label>
                    <input
                      type='text'
                      required
                      className=' rounded-lg border-transparent flex-1 appearance-none border border-gray-400 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-accent1 focus:border-transparent'
                      placeholder='Spotify'
                      onChange={onSetProductName}
                    />
                  </div>
                </div>
                {/* <div className='flex pt-6'>
                  <InputField
                    id='productDescriptionField'
                    required={true}
                    className='border-solid border-2 border-gray-200 pl-3 w-full rounded-lg resize-none h-full p-1'
                    type='text'
                    placeholder='Spotify is a music service that lets you listen to music and share it with friends.'
                    label='Product Description'
                    maxRows={5}
                    onChange={onSetProductDescription}
                    multiline
                  />
                </div>
                <div className='flex pt-6'>
                  <InputField
                    id='platformField'
                    required={true}
                    className='border-solid border-2 border-gray-200 pl-3 w-full rounded-lg h-full'
                    type='text'
                    placeholder='Instagram'
                    label='Platform'
                    onChange={onSetPlatform}
                  />
                </div>
                <div className='flex pt-6'>
                  <InputField
                    id='audienceField'
                    required={true}
                    className='border-solid border-2 border-gray-200 pl-3 w-full rounded-lg h-full'
                    type='text'
                    placeholder='Teens'
                    label='Audience'
                    onChange={onSetAudience}
                  />
                </div> */}
                <div className='grid'>
                  <div className='grid grid-cols-2 pt-6'>
                    {pendingCreativeAd === true ? (
                      <div className='grid justify-start'>
                        <button
                          type='button'
                          disabled={true}
                          className='py-2 px-4 flex justify-center items-center bg-gray-600 text-white w-full transition ease-in duration-200 text-center text-base font-semibold rounded-lg '
                        >
                          1 sec.
                          <LoadingIcon height={21} width={21} />
                        </button>
                      </div>
                    ) : (
                      <div className='grid justify-start'>
                        <button
                          type='submit'
                          // onClick={generate}
                          className='py-2 px-4 flex justify-center items-center  bg-accent1 hover:bg-blue-800 focus:bg-accent1 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none rounded-lg  '
                        >
                          Generate
                        </button>
                      </div>
                    )}
                    <div className='grid justify-end'>
                      <button
                        type='button'
                        onClick={clearForm}
                        className='py-2 px-4 flex justify-center items-center  bg-orange-700 hover:bg-orange-800 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:bg-orange-700  rounded-lg  '
                      >
                        Clear Form
                      </button>
                    </div>
                  </div>
                </div>
              </form>

​

​

 const generate = async (e) => {
    e.preventDefault();
    startGenAd(productName, productDescription, platform, audience);
    console.log('submitting generate');
  };

​

Answer 1

只需在表单的提交事件中使用generate函数，而不是在Button的Click事件中使用。我认为这是最简单的方法。

Answer 2

将e类型设置为

​

  const generate = async (e: { preventDefault: () => void; }) => {
    e.preventDefault();
    startGenAd(productName, productDescription, platform, audience);
    console.log('submitting generate');
  };

​