文件上傳按鈕使整個組件可點擊

Question

我正在嘗試為 React 中的表單構建一個簡單的文件上傳輸入。 我想要一個用戶按下以觸發文件上傳輸入的自定義按鈕。 似乎這樣做的方法是將 useRef 附加到輸入，然后使用單擊事件來觸發文件輸入。 所有這一切都有效，除非我這樣做會使整個組件可點擊。 我所做的所有搜索都產生了相反的答案，即解釋如何使整個組件可點擊。 我不想要這種行為，我不知道為什么會這樣。

const fileInputField = useRef(null);

const handleClick = () => {
    fileInputField.current.click();
  };

    
<div className="file-upload-box">
                
                <p>Drag a file here or</p>

                <button onClick={handleClick}>
                  BROWSE
                </button>
    
           
                <input
                  style={{ display: "none" }}
                  type="file"
                  title=""
                  value=""
                  ref={fileInputField}
                  
                />
</div>

Answer 1

在 javascript 中，任何事件都會被觸發並冒泡到其父元素，直到到達根元素。

您需要從按鈕停止事件傳播。

const handleClick = (e) => {
    e.stopPropagation();
    fileInputField.current.click();
};

或者，如果事件的target元素是瀏覽按鈕，則可以在組件單擊事件中檢查return單擊 function 而不執行。