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/

我的目标是一个非常简单的工作流程。可以在不需要鼠标的情况下编辑一个接一个的输入。这个过程就像这样

点击＆＃34;从这里开始＆＃34;设置＆＃34;标签位置＆＃34;
点击标签
输入一个值，点击标签
输入一个值，点击标签
输入一个值，点击标签
点击进入

但是当我换到下一页时，我需要手动点击＆＃34;从这里开始＆＃34;为了能够再次这样做。

无论如何，我可以自动将标签位置移动到＆＃34;从这里开始＆＃34;？（我不想专注于第一个输入元素，直到用户点击Tab）

Answer 1

快速简便的解决方案是在输入上添加autoFocus，如下所示：

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

Answer 2

根据我的评论和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>
        );
    }
});

Answer 3

根据html5 SELECT SERVERNAME = CONVERT(NVARCHAR(128),SERVERPROPERTY('SERVERNAME')) ,LOCAL_NET_ADDRESS AS 'IPAddressOfSQLServer' ,local_tcp_port AS 'PortNumber' FROM SYS.dm_exec_connections WHERE local_net_address IS NOT NULL AND session_id IS NOT NULL GROUP BY LOCAL_NET_ADDRESS,local_tcp_port元素的MDN文档及其自动对焦道具：

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

Answer 4

前面有以下内容：

b="Coca-Cola is the most popular and biggest-selling soft drink in history, as well "

def truncate x
a=x.split("").first(70).join

w=a.split("").map!.with_index do |x,y|
    if x!=" "
        x=nil
    else
        x=y
    end
end
w.compact!
index=w.last

x.split("").first(index).join+" ..."
end

truncate b

每当用户按Tab键并且未选择任何内容时，它将自动选择第一个字段，继续您的模式。

新小提琴：

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

是否可以设置＆＃34;标签位置＆＃34;在使用React的html doc中

4 个答案: