Redux 表单 - 光标跳到输入字段的末尾

Question

我有以下课程

export default class TestInput extends Component {

    state = {
         modified: false
    };

    change = e => {
         this.setState({ modified: true });
         this.props.input.onChange(e.target.value);
    };

     render() {
        return (
            <input type="text" value={this.props.input.value} onChange={this.change} className={!this.state.modified && this.props.meta.pristine ? 'default' : 'modified'} />
        );
    }
}

我就是这样使用的

<Field component={TestInput} name="testProp" />

每当我将光标放在字段文本的中间并写一个字母时，该字母会出现在正确的位置，但光标会跳到字段的末尾。这是由this.setState({ modified: true }); 行和随后的类更改引起的。如果我注释掉这一行，这不会发生。我不明白。我究竟做错了什么？我能做点什么吗？

Answer 1

我现在遇到了这个问题。

这是我解决它的方法。 包括 ie11 在内的大多数现代浏览器都在输入 dom 节点上支持一个名为 selectionStart 的属性，该属性指示光标位置在哪里（注意它不是 0 索引，而是从 1 开始）。同级设置器属性是 setSelectionRange(begin, end)。如果您可以在其更改事件触发时捕获实际节点的光标位置，您可以在组件渲染后设置节点的光标位置，并且输入认为它已收到新的文本输入，将其光标移动到新输入的末尾。

免责声明：您必须使用 REACT REFS

根据您的堆栈，代码可能如下所示。

class MyForm extends React.Component {
   constructor(props) {
      super(props)
      this.state = { selectionStart }
      this.inputElRef = React.createRef();
      this.preserveCursor = this.preserveCursor.bind(this)
      this.setCursor = this.setCursor.bind(this)
      this.handleOnChange = this.handleOnChange.bind(this)
   }
   preserveCursor() {
      this.setState({ selectionStart: this.inputElRef.current.selectionStart })
   }
   setCursor() {
      this.inputElRef.current.setSelectionRange(
         this.state.selectionStart,
         this.state.selectionStart,
      )
   }
   handleOnChange() {
      this.preserveCursor()
   }
   componentDidUpdate() {
      this.setCursor()
   }
   render() {
     const { ...props } = this.props;
     <div>
       <form>
          <input ref={this.inputElRef} { ...props } onChange={this.handleOnChange} name="foo" />
      </form>

   }
}
export default connect()(reduxForm({ name: 'MyForm' })(MyForm)

注意：如果你使用 react-toolbox 之类的东西而不是原始 dom 输入 您将需要传递innerRef 而不是 ref，并且该值应该是 (el) => { this.myProperty = el } 形式的绑定函数，即使 react-toolbox 不知道 ref，也可以访问 ref，扩展反应组件有 innerRef 的意识...

Answer 2

如果您在文本字段中使用来自 redux 存储的值并更新 redux 存储 onChange 的值。从 react-redux 版本 6.0.1 及更高版本中观察到该问题。把你的 react-redux 版本改成 6.0.0 就可以解决光标跳转问题了。

Answer 3

这发生在onChange 事件上，即每次您尝试更改输入值时，您的change() 函数都会被触发，其中您有一个this.setState({ modified: true })，因为您可能知道 this.setState 强制要重新渲染的组件，并且知道这一次，因为!this.state.modified 将返回 false，因此该类更改为modified，这意味着它工作得很好，光标跳到末尾可能有一些事情要做你的modified上课，除此之外什么都没有。

您可能需要查看并重新表述您的问题，您希望发生什么？