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>);
    }