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

这发生在onChange事件上，也就是说，每当您尝试更改输入的值时，change()函数都会被触发，您可能会this.setState({ modified: true })知道this.setState强制组件重新渲染，并知道这一次，因为!this.state.modified将返回false，所以类被更改为modified，这意味着它正常工作，光标跳转到除了没什么不对之外，最后可能会有你的modified课程。

您可能需要查看并重新定义您的问题，您想要的是什么？

Answer 2

我现在遇到这个问题。

以下是我如何解决它。大多数现代浏览器（包括ie11）都支持名为selectionStart的输入dom节点上的属性，此属性指示光标位置的位置（注意它不是0索引，而是从1开始）。兄弟setter属性是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而不是raw dom输入你将需要传递innerRef而不是ref，并且该值应该是(el) => { this.myProperty = el }形式的绑定函数，即使react-toolbox没有ref的意识，也可以访问ref。，extend react组件具有innerRef ...

的意识

Answer 3

如果您正在文本字段中使用Redux存储中的值并更新onChange上Redux存储中的值。从react-redux版本6.0.1及更高版本可以观察到该问题。将您的react-redux版本更改为6.0.0，并应解决光标跳转问题。

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

3 个答案: