javascript - 是否可以使用 React 在 html 文档中设置 "tab position"

Question

假设我有这个组件:

   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 之前我不想关注第一个输入元素)

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