是否可以使用 React 在 html 文档中设置“标签位置”答案

【问题标题】：Is it possible to set the "tab position" in an html doc using React是否可以使用 React 在 html 文档中设置“标签位置”
【发布时间】：2017-09-03 08:45:02
【问题描述】：

假设我有这个组件：

   React.createClass({
      getInitialState: function() {
        return {pg: 0};
      },
      nextPage: function(){
        this.setState({ pg: this.state.pg+1} )
      },
      render: function() {
        var inputs = [ <input key={1} placeholder="one"/>, 
                       <input key={2} placeholder="two"/>, 
                       <input key={3} placeholder="three"/>]
        if(this.state.pg === 1){
          inputs = [ <input key={4} placeholder="four"/>, 
                     <input key={5} placeholder="five"/>, 
                     <input key={6} placeholder="six"/>]
        }
        return(
          <div>
              <h1>start here</h1>
              {inputs}
              <button onClick={this.nextPage.bind(this)}>next</button>
          </div>
        );
      }
    });

https://jsfiddle.net/69z2wepo/75909/

我的目标是建立一个非常简单的工作流程。无需鼠标即可编辑一个接一个的输入。流程是这样的

点击“从这里开始”设置“标签位置”
点击标签
输入一个值，点击tab
输入一个值，点击tab
输入一个值，点击tab
回车

但是，当我切换到下一页时，我需要手动单击“从这里开始”才能再次执行此操作。

无论如何我可以自动将标签位置移动到“从这里开始”吗？（在用户点击 Tab 之前，我不想关注第一个输入元素）

【问题讨论】：

您是否尝试过仅添加 tabindex 属性？
所有你需要做的就是做一个document.addEventListener('keypress', handler) 然后在处理函数中` if(e.keyCode === 9) {first input.focus()}`
@lonewarrior556 here is a fiddle doing what you describe
@john-ruddell 想要回答吗？
@lonewarrior556 确定！刚刚给你一个答案:)

标签： javascript jquery html reactjs

【解决方案1】：

根据我的评论和 OP 的要求，将其作为答案。您想要做的是有一个 tab 键的侦听器，并在按下 tab 时以编程方式聚焦输入。诀窍是您在应用焦点后移除侦听器，以便它自然地聚焦下一个输入。

var SomeComponent = React.createClass({
    getInitialState: function () {
        return { pg: 0 };
    },
    componentDidMount: function () {
        window.addEventListener('keydown', this.handleKeyPress)
    },
    componentWillUnmount: function () {
        window.removeEventListener('keydown', this.handleKeyPress)
    },
    handleKeyPress: function (e) {
        e.preventDefault();
        if (e.keyCode === 9) {
            this.refs.firstInput && this.refs.firstInput.focus();
            window.removeEventListener('keydown', this.handleKeyPress)
        }
    },
    nextPage: function () {
        this.setState({ pg: this.state.pg + 1 }, function () {
            window.addEventListener('keydown', this.handleKeyPress)
        })
    },
    render: function () {
        var inputs = [<input key={1} ref="firstInput" placeholder="one" />,
        <input key={2} placeholder="two" />,
        <input key={3} placeholder="three" />]
        if (this.state.pg === 1) {
            inputs = [<input key={4} ref="firstInput" placeholder="four" />,
            <input key={5} placeholder="five" />,
            <input key={6} placeholder="six" />]
        }
        return (
            <div>
                <h1> start here</h1>
                {inputs}
                <button onClick={this.nextPage}>next</button>
            </div>
        );
    }
});

【讨论】：

【解决方案2】：

一个快速简单的解决方案是在输入上添加一个自动对焦，如下所示：

if(this.state.pg === 1){
        inputs = [ <input key={4} placeholder="four" autoFocus />, 
                     <input key={5} placeholder="five"/>, 
                     <input key={6} placeholder="six"/>]
        }

【讨论】：

在用户点击 Tab 之前，我不想关注第一个可编辑的输入元素

【解决方案3】：

根据 html5 <input> 元素上的 MDN 文档，它是自动对焦道具：

这个布尔属性允许你指定一个表单控件应该页面加载时具有输入焦点，除非用户覆盖它（例如，通过键入不同的控件）。一个表单中只有一个表单元素文档可以有 autofocus 属性，它是一个布尔值。它如果 type 属性设置为 hidden 则无法应用（也就是说，您无法自动将焦点设置到隐藏控件）。请注意，控制的聚焦可能发生在发射之前 DOMContentLoaded 事件。

【讨论】：

【解决方案4】：

添加以下内容：

$(document.body).on("keyup", function (e) {
  if (e.which === 13) {
    $("input:visible:first").focus();
  }
});

当用户按下 Tab 并且没有选择任何内容时，它会自动选择第一个字段，继续您的模式。

新小提琴：

https://jsfiddle.net/69z2wepo/75910/

【讨论】：