reactjs - 在 React 中格式化数字时停止光标/插入符跳跃

Question

我的 react 组件上有一个输入字段，显示商品的行价格(两位小数，带有千位分隔符)。我希望组件首次呈现时显示的值采用货币格式，并且当用户在字段中键入时也保持货币格式。

目前我的组件中有以下代码:

var React = require('react');
import accounting from 'accounting';
    
MoneyInput = React.createClass({
    propTypes: {
        name: React.PropTypes.string.isRequired,
        onChange: React.PropTypes.func.isRequired,
        value: React.PropTypes.number,
        error: React.PropTypes.string,
    },
    
    onChange(event) {
        // get rid of any money formatting
        event.target.value = accounting.unformat(event.target.value);
    
        // pass the value on
        this.props.onChange(event);
    },
    
    getValue() {
        return accounting.formatNumber(this.props.value, 2)
    },
    
    render() {
    
        return (
                <div className="field">
                    <input type="text"
                           name={this.props.name}
                           className="form-control"
                           value={this.getValue()}
                           onChange={this.onChange} />
                    <div className="input">{this.props.error}</div>
                </div>
        );
    }
});

module.exports = MoneyInput;

该代码显示的数据格式正确，但每次我输入一个值时，光标/插入符号都会跳到数字的末尾。

我理解为什么会发生这种情况(我认为)，并且我在这里阅读了几个与在 JavaScript 中不丢失光标位置相关的问题(例如 here 和 here)。

我的问题是在 React 中处理这个问题的最佳方法是什么？

我认为理想情况下我不想将光标位置存储在状态中(例如我希望它们是 Presentation Components in Dan Abramov syntax )那么还有其他方法吗？

Answer 1

在 React 的 <input /> 中丢失光标/插入符位置的简单解决方案正在格式化的字段是为了自己管理位置:

    onChange(event) {

      const caret = event.target.selectionStart
      const element = event.target
      window.requestAnimationFrame(() => {
        element.selectionStart = caret
        element.selectionEnd = caret
      })

      // your code
    }

你的光标位置重置的原因是因为 React 不知道你正在执行什么类型的更改(如果你将文本完全更改为更短或更长怎么办？)，而你现在负责控制插入符位置。

示例:在我的一个输入文本字段中，我自动将三个点 (...) 替换为省略号。前者是三个字符长的字符串，后者只有一个字符。虽然 React 知道最终结果会是什么样子，但它不会再知道将光标放在哪里，因为没有明确的逻辑答案。