输入组件的 React 游标跳转以在某些删除时开始

Question

我创建了一个建立在输入元素之上的 React 组件。我在这里提供了一个沙箱：https://codesandbox.io/s/green-monad-tgn45?file=/src/input.jsx。一切正常，除了当我尝试删除带有 space 的内容时仍然遇到问题。例如，输入“this is some text”然后删除任何这些词会使我的光标跳到输入字段的开头。删除字符工作正常，但由于某种原因，当我删除一个前面字符是 space 的字符时，它会跳到开头。奇怪的是，如果我输入“test”或其他一些结尾带有一堆 space 的词，我没有任何问题。但是，一旦我有一个以 space 开头的单词，例如“test one”，删除第二个单词会使我的光标跳到开头。

我见过其他人遇到游标跳到末尾的问题，但从来没有看到游标以这种方式跳到开头。我处理 onChange 事件的方式有问题吗？

这是我的组件（沙盒中也提供了代码）：

class Input extends Component {
  state = {
    inputValue: ""
  };

  handleChange = event => {
    console.log(event.target.value);
    this.setState({ inputValue: event.target.value });
    if (this.props.onChange) this.props.onChange(this.state.inputValue);
  };

  render() {
    const { type, maxLength, placeholder } = this.props;

    return (
      <input
        type={type}
        value={this.state.inputValue}
        name="input-form"
        onChange={this.handleChange}
        maxLength={maxLength}
        placeholder={placeholder}
      />
    );
  }
}

Answer 1

我认为您的代码没有任何问题。就是这样，

<Input type="email" maxLength="100" placeholder="test" />

对于输入类型的电子邮件，浏览器可能会尝试检查和格式化。因为您不能在电子邮件中添加尾随 space，对吧。
尝试将 type 更改为 text，问题消失了！！,

<Input type="text" maxLength="100" placeholder="test" />

输入组件的 React 游标跳转以在某些删除时开始

React Cursor for Input Component Jumps to Start on Certain Deletes

html

javascript

input

custom-component

reactjs