React htmlFor - 點擊 label 關注輸入錯誤

Question

我有以下代碼：

const SomeComponent = () => {
return (
    <div>
            <label className={styles.label} htmlFor="firstName">
              First Name
            </label>
            <input type="text" id="firstName" value={user.firstName} />
          </div>
          <div>
            <label className={styles.label} htmlFor="lastName">
              Last Name
            </label>
            <input type="text" id="lastName" value={user.lastName} />
          </div>
          <div>
            <label className={styles.label} htmlFor="email">
              Email
            </label>
            <input type="email" id="email" value={user.email} />
          </div>);
    }

它在同一頁面上的多個位置呈現。 單擊中間元素的 label 始終會在第一個輸入上創建焦點，而不是在它附近的輸入上。

我如何確保 label 專注於正確的輸入（靠近它的那個，它在同一個組件中）而不是第一個（渲染的第一個SomeComponent ）？

Answer 1

您必須確保 id 在整個頁面中是唯一的。 所以看起來你有幾個輸入使用 id email這就是頁面中的第一個輸入獲得焦點的原因。

解決它的一種方法是將id作為道具傳遞給組件。

const SomeComponent = ({id}) => {
  
  return (
    <div>
            <label className={styles.label} htmlFor={`firstName-${id}`}>
              First Name
            </label>
            <input type="text" id= {`firstName-${id}`} value={user.firstName} />
          </div>
          <div>
            <label className={styles.label} htmlFor= {`lastName-${id}`} >
              Last Name
            </label>
            <input type="text" id= {`lastName-${id}`} value={user.lastName} />
          </div>
          <div>
            <label className={styles.label} htmlFor= {`email-${id}`} >
              Email
            </label>
            <input type="email" id= {`email-${id}`} value={user.email} />
          </div>);
    }