Javascript 按钮在呼叫窗口后仍可单击。警报

我试图阻止多次提交。为了防止提交相同的值，我调用window.alert停止进程并告诉用户输入值已经注册。问题是，在警报窗口打开后，提交似乎可以单击。因为在警报窗口打开后，我点击了几次按钮，然后关闭了警报窗口。警报窗口立即重新打开，没有任何单击。windo打开后，提交按钮似乎可以单击。如何在警报窗口打开后立即禁用所有输入

我试图通过设置状态来禁用按钮。然而，它没有起作用

HTML  
<form onSubmit={(e) => submitHandler(e)}>
        <input
          name="words"
          value={words}
          placeholder="Enter Tag for search"
          onChange={(e) => onChangeHandler(e)}
        />
        {disable ? (
          <h1>updating</h1>
        ) : (
          <button type="submit" disable={disable}>
            submit
          </button>
        )}
      </form>


const submitHandler = (e) => {
    e.preventDefault();
    if (!words) {
      return null;
    }
    setNewSearchWordsState({ ...newSearchWordsState, disable: true });
    const newList = list.map((item, idx) => {
      if (idx === id) {
        item.searchWords.map((searchWord) => {
          if (searchWord === words) {
            setNewSearchWordsState({ ...newSearchWordsState, words: '' });
            window.alert(`${words} already registered`);
          }
          item.searchWords.push(words.toLowerCase());
        });
      }
      return {
        ...item,
      };
    });
    updateSearchWords(newList);
    setNewSearchWordsState({ words: '', disable: false });
  };

HTML
提交人（e）}>
onChangeHandler（e）}
/>
{禁用(
更新
) : (
提交
)}
常量submitHandler=（e）=>{
e、 预防默认值（）；
如果（！字）{
返回null；
}
setNewSearchWordsState（{…newSearchWordsState，disable:true}）；
const newList=list.map（（项目，idx）=>{
if（idx==id）{
item.searchWords.map（（searchWord）=>{
if（searchWord==单词）{
setNewSearchWordsState（{…newSearchWordsState，单词：'}）；
警告（`${words}已注册`）；
}
item.searchWords.push（words.toLowerCase（））；
});
}
返回{
项目
};
});
更新搜索词（新列表）；
setNewSearchWordsState（{words:''，disable:false}）；
};

您可能需要尝试此工作示例

//HTML
提交
//JAVASCRIPT
函数changeHandler（）{
var words=document.getElementById（'words'）；
var btn=document.getElementById（'btn'）；
var text=words.value；
如果（！text）{
btn.disabled=true；
}否则{
btn.disabled=false；
}
}
函数submitHandler（）{
//你的代码在这里
警报（“已提交”）；
返回false；
}

按钮元素只有

禁用的

属性，如果您使用该属性而不是

禁用

，是否有帮助？@ikaraz感谢您的评论。我尝试了disabled={disable}。但它并不能解决这个问题；要设置NewSearchWordsState（{words:''，disable:true}）@Sohail你好。你提到的是代码的哪一部分？如果你指的是初始状态，那就没有意义了。因为我需要首先启用按钮。内部submitHandler函数。代码的最后一行。

// HTML

<form onsubmit="submitHandler()">
    <input id="words" onkeyup="changeHandler()" placeholder="Enter Tag for search" />
    <button type="submit" id="btn" disabled=true>Submit</button>
</form>

//JAVASCRIPT

<script>
function changeHandler(){
  var words = document.getElementById('words'); 
  var btn = document.getElementById('btn'); 
  var text = words.value;

  if(!text){
    btn.disabled = true;
  }else{
    btn.disabled = false;
  }
}

function submitHandler(){
  //Your code here
  alert("submitted");
  return false;
}
</script>