Question

即使我用鼠标主动更改它，我的React Web应用仍将焦点集中在表单中的第一个输入字段上（尽管我可以通过制表符来切换输入字段）。

所以我尝试调试只是为了找出问题所在或发生的位置。但是我相信这可能与HTML和我不知道的输入字段的工作方式有关，或者可能与某些浏览器特定的功能有关，因为这仅在Safari中而不是在Chrome中发生。

React应用程序使用以下代码创建输入字段的列表。 Skills是一个数组，默认情况下其中包含三个空字符串，例如["", "", ""]。

Keyword组件的呈现如下面的代码片段所示。

{Skills.map((i, index) => {
   return (
      <Keyword
         key={index}
         value={i}
         type="text"
         className={css(inheritedStyles.formInput)}
         changed={e => onListChange(e, 'Skills', index)}
         clicked={e => onListRemove(e, index, 'Skills')}
       />
   );
})}

  render() {
    const { changed, clicked, value } = this.props;
    return (
      <div>
        <input value={value} className={css(styles.formInput)} type="text" onChange={changed} />
        <a href="#remove-skill-field" onClick={clicked}>
          <svg className={css(styles.removeKeyword)} viewBox="0 0 96 96">
            <path
              fill={this.props.color}
              fillRule="evenodd"
              d="M48,44.8180195 L85.5756764,7.24234308 L87.1666667,5.65135282 L90.3486472,8.83333333 L88.7576569,10.4243236 L51.1819805,48 L90.3089626,87.1269821 L91.8999529,88.7179724 L88.7179724,91.8999529 L87.1269821,90.3089626 L48,51.1819805 L8.87301788,90.3089626 L7.28202762,91.8999529 L4.10004711,88.7179724 L5.69103736,87.1269821 L44.8180195,48 L7.24234308,10.4243236 L5.65135282,8.83333333 L8.83333333,5.65135282 L10.4243236,7.24234308 L48,44.8180195 Z"
            />
          </svg>
        </a>
      </div>
    );
  }

因此，我希望它会（默认情况下）连续产生3个空输入字段，我可以通过单击和制表键在两者之间自由导航。

这三个输入字段确实出现并且为空，但是，当我尝试单击第二个或第三个输入字段时，Safari会自动将第一个输入字段聚焦。

有人知道这是为什么吗？感谢所有帮助！

尝试将焦点切换到另一个输入字段，但浏览器自动将表单中的“第一个”输入字段聚焦（仅限Safari）

0 个答案: