單擊未注冊輸入失去焦點時移動的按鈕

Question

我在用 React 創建表單時遇到了一個奇怪的問題（但是很可能不是 React 特有的）。 該表單由一個輸入、一個位於其下方的錯誤提示和一個按鈕組成，所有這些都垂直堆疊。 輸入集中在組件安裝上，當用戶在輸入之外單擊時可能會出現錯誤提示。 當輸入獲得焦點並且用戶嘗試單擊按鈕時，它會失去焦點，這可能會導致提示出現。 提示將按鈕向下推，這會阻止按鈕的點擊事件注冊，從而導致糟糕的用戶體驗。

有沒有辦法在輸入失去焦點之前強制單擊按鈕？

我在這里復制了這種情況： https : //jsfiddle.net/tacticalteapot/b40hLv3c/4/

來自小提琴的代碼：

function App() {
  const ref = React.useRef(null);
  const [showLabel, setShowLabel] = React.useState(false);
  const [clicked, setClicked] = React.useState(false);
 
  React.useEffect(() => {
    ref.current.focus();
  }, []);
  
  return (
  <div>
    <input ref={ref} onBlur={() => setShowLabel(true)} />
    <div>
      {showLabel && <label>a label appeared that moved the button</label>}
    </div>
    <div>
      <button onClick={() => setClicked(true)}>
        CLICK ME
      </button>
    </div>
    {clicked && <h6 style={{color: 'red'}}>CLICKED</h6>}
  </div>)
}

Answer 1

這是由於事件的順序而發生的。 onBlur首先觸發，立即顯示標簽。 <label>直接呈現在按鈕的“頂部”。 您的點擊事件永遠不會注冊。 要對此進行測試，請嘗試為您的標簽設置高度，甚至將其包裝在另一個具有高度的容器中。 或者，向您的按鈕添加填充，使其不被<label>完全覆蓋 - 它會注冊。

顯然，有更好的造型方法。

 function App() { const ref = React.useRef(null); const [showLabel, setShowLabel] = React.useState(false); const [clicked, setClicked] = React.useState(false); React.useEffect(() => { ref.current.focus(); }, []); handleClick = () => { setClicked(true); } return ( <div> <input ref={ref} onBlur={() => setShowLabel(true)} /> <div className="test"> {showLabel && <label>a label appeared that moved the button</label>} </div> <div> <button style={{padding: "30px"}} onClick={() => handleClick()}> CLICK ME </button> </div> {clicked && <h6 style={{color: 'red'}}>CLICKED</h6>} </div>) } ReactDOM.render(<App/>, document.getElementById('app'));

Answer 2

我不認為對焦有問題。 嘗試使用Tab ，按鈕會正確聚焦。 問題在於用戶體驗本身以及頁面是如何被驗證消息推送的。

最好稍微更改 UX 以允許驗證錯誤的空間，而無需推送以下任何元素：

https://jsfiddle.net/eucj04np/5/

另外，請記住添加指向帶有錯誤驗證消息的元素的 id 的aria-describedby 。 這將有助於輔助技術在元素被聚焦后讀出錯誤內容。