如何在反应输入元素中保持光标位置答案

【问题标题】：How to keep cursor position in a react input element如何在反应输入元素中保持光标位置
【发布时间】：2019-07-11 17:39:09
【问题描述】：

光标一直移动到末尾。从字符串中间编辑时如何保持光标位置？

我使用的代码是：

const rootElement = document.getElementById('root');

class MyFancyForm extends React.Component {

    constructor(props) {
        super(props);
        this.state = {myValue: ""};
    }

    handleCommaSeparatedChange = event => {
        const {value} = event.target;
        this.setState({myValue: value});
    };




    render() {
        return(
            <form >

                <div>
                    <label>
                        Cursor position looser
                        <br />
                        <input onChange={this.handleCommaSeparatedChange} value={this.state.myValue} />
                    </label>
                </div>


            </form>
        )
    }
}

const element = <MyFancyForm />;

ReactDOM.render(element, rootElement);

知道如何实现吗？

【问题讨论】：

我尝试了您的确切代码，但没有得到这种跳跃的光标行为。这是什么浏览器？
@Josep 我实际上在codesandbox.io/s/km35znxvx5 上看不到问题，尽管我在您发布的 jsfiddle 上看到了问题。可能是捆绑程序/版本问题？
我对@987654323@ 是错误的但here 没问题感到疯狂。
@Vencovsky 好吧，这不是浏览器，也不是提供的代码，这意味着我们唯一剩下的就是库的版本控制。我认为 Gabriele Petrioli 正在做某事。
@redochka 你在哪里运行这段代码？您的本地环境或类似 codepen 或 jsfiddle 的东西？

标签： javascript reactjs ecmascript-6

【解决方案1】：

只需将 value 更改为 defaultValue - 它适用于我的 codepen 和 codesandbox

class MyFancyForm extends React.Component {

    constructor(props) {
        super(props);
        this.state = {myValue: ""};
    }

    handleCommaSeparatedChange = event => {
        const {value} = event.target;
        this.setState({myValue: value});
    };




    render() {
        return(
            <form >

                <div>
                    <label>
                        Cursor position looser
                        <br />
                        <input onChange={this.handleCommaSeparatedChange} defaultValue={this.state.myValue} />
                    </label>
                </div>


            </form>
        )
    }
}


  ReactDOM.render(
    <MyFancyForm />,
    document.getElementById('root')
  );

【讨论】：

当我们通过 usint 'onChange' 事件格式化值时不起作用。

【解决方案2】：

我知道这是一篇旧帖子，但这可能会对某人有所帮助。

我在一个 github 问题中发现了这个 sn-p，并帮助我解决了这个问题。

onChange={(event) => {
  event.persist()
  const caretStart = event.target.selectionStart;
  const caretEnd = event.target.selectionEnd;
  // update the state and reset the caret
  this.updateState();
  event.target.setSelectionRange(caretStart, caretEnd);
}}

引用自： https://github.com/facebook/react/issues/955#issuecomment-469344232

【讨论】：