React autoFocus 将光标设置到输入值的开头答案

【问题标题】：React autoFocus sets cursor to beginning of input valueReact autoFocus 将光标设置到输入值的开头
【发布时间】：2016-06-27 09:07:20
【问题描述】：

我有一个初始显示值的受控输入。我已将该输入设置为 autoFocus，但是当我希望光标出现在末尾时，光标会出现在输入的开头。我知道这可能是因为自动对焦是在值之前添加的，但我不是 100% 确定。

在输入字段末尾完成光标初始化的最佳方法是什么？

var Test = React.createClass({

    getInitialState: function() {
        return {
           teamId: 'fdsfds'
        };
    },

    render: function() {
        return (
                <input type="text" autoFocus value={this.state.teamId} onChange={this.setTeamId} />
        );
    },

    setTeamId: function(event) {
        this.setState({ teamId: id });
    },

});

ReactDOM.render(
  <Test />,
  document.getElementById('container')
);

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

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

一个解决方案：

<input
  type="text"
  autoFocus
  value={this.state.teamId}
  onChange={this.setTeamId}
  onFocus={function(e) {
    var val = e.target.value;
    e.target.value = '';
    e.target.value = val;
  }}
/>

https://jsfiddle.net/o3s05zz4/1/

改编本答案：https://stackoverflow.com/a/2345915/1589521

【讨论】：

也许像其他道具一样用另一种方法提取逻辑？顺便说一句，效果很好。
这似乎不是一个好的解决方案，因为它在末尾移动光标不仅是为了自动对焦，而且当用户稍后通过单击它来聚焦输入时。不好的用户体验。

【解决方案2】：

这确实有效：

componentDidMount() {
    const input = this.input;
    const length = input.value.length;
    input.focus();
    input.setSelectionRange(length, length);
}

render() {
   return (
       <input ref={ref => this.input = ref} ... >
   )
}

PS。如果您需要支持 IE8 及以下版本，则需要使用特定于 IE 的检查。

【讨论】：

提示：不需要lengthconst，你可以input.setSelectionRange(Infinity, Infinity)

【解决方案3】：

在 componentDidMount 中设置输入值似乎可以解决问题，但感觉就像是 hack：

componentDidMount: function(){
    this.inputElement.value = this.state.teamId;
},

render: function() {
    var that = this;
    return <input ref={function(ref){that.inputElement = ref;}} type="text" autoFocus value={this.state.teamId} onChange={this.setTeamId} />;
},

https://jsfiddle.net/yuk13tuu/

【讨论】：

【解决方案4】：

在 TypeScript 中：

private inputDOM: HTMLInputElement | null;

public componentDidMount() {
    if (this.inputDOM != null) {
        this.inputDOM.value = '';
        this.inputDOM.value = this.state.newRegionName;
    }
}

public render() {
    return <input ref={(ref: HTMLInputElement | null) => this.inputDOM = ref} type="text" autoFocus={true} value={this.state.inputValue} />;
}

【讨论】：

【解决方案5】：

这样输入的文本将被选中，准备编辑

<input
  type="text"
  defaultValue="Untitled"
  autoFocus
  onFocus={e => e.currentTarget.select()}
/>

【讨论】：

【解决方案6】：

看起来 html 属性 autofocus 没有使用任何参数来指定光标应该从哪里开始。见mdn documentation。

Sitepoint 有一个很棒的教程，解释了您对 setting cursor position from within an input box 的选择。

至于反应方面，您只需将 jQuery（或其他与光标相关的代码）放在 componentDidMount 生命周期方法中。

【讨论】：