删除文件夹后保留相同的位置

我有简单的反应输入组件，只接受数字，每个键盘输入我检查输入并仅返回验证的条目，在第3个字符后，我将-字符添加到输入。一切工作正常，但是当我编辑/从第一个第三个字符删除一个字符我的脱字符跳转到最后定位它的烦人，我如何保持在同一位置的插入符号。删除文件夹后保留相同的位置

Link to working example

我输入组件

class App extends Component { 

    constructor(props){ 
     super(props) 
     this.state = { 
      value: '' 
     } 
    } 

    render() { 
     const {value} = this.state 
     return (
     <div className="App"> 
      <input type="text" value={value} onChange={this._onChange}/> 
     </div> 
     ) 
    } 

    _onChange = (e) => { 
     this.setState({value: this._validate(e.target.value)}) 
    } 

    _validate(string){ 
     return new Input(string) 
      .filterNumbersOnly() 
      .addSeparator() 
      .getString() 
    } 

} 

export default App;

这里是我的字符串验证类

export default class Input{ 
    constructor(string){ 
     this.string = string 
    } 

    filterNumbersOnly(){ 
     const regex = /(\d)/g 
      ,strArray = this.string.match(regex) 
     this.string = strArray ? strArray.reduce((a,b) => { return `${a}${b}` }, '') : '' 
     return this 
    } 

    addSeparator(){ 
     const charArray = this.string.split('') 
     this.string = charArray.reduce((a,b,index) => { 
      if(index > 2 && index < 4) { 
       return `${a}-${b}` 
      } 
      return `${a}${b}` 
     }, '') 
     return this 
    } 

    getString(){ 
     return this.string 
    } 
}

来源

2017-09-26 Wimal Weerawansa

没有办法，如果你能保持在选择范围和要素目标，然后后应用它设置状态，即设置状态回调如下：

_onChange = (e) => { 
     var r =[e.target.selectionStart,e.target.selectionEnd]; 
     var el = e.target; 
     this.setState({value: this._validate(e.target.value)},()=>{ 
      //just to make sure you extend cursor in case of - addition 
      if (r[1] === this.state.value.indexOf("-")+1) 
       r[1]++; 
      el.setSelectionRange(r[0], r[1]); 
     }) 
    }

样品网址https://codesandbox.io/s/628q1rvnl3

来源

2017-09-26 05:18:19

它解决我的问题，初始化选择在回调的setState

let el = ev.target     
this.setState({ 
    sum: value 
},() => { 
    el.setSelectionRange(1, 1) 
})

来源

2017-09-29 13:18:34

删除文件夹后保留相同的位置

回答

相关问题