删除文件夹后保留相同的位置
问题描述:
我有简单的反应输入组件,只接受数字,每个键盘输入我检查输入并仅返回验证的条目,在第3个字符后,我将-
字符添加到输入。一切工作正常,但是当我编辑/从第一个第三个字符删除一个字符我的脱字符跳转到最后定位它的烦人,我如何保持在同一位置的插入符号。删除文件夹后保留相同的位置
我输入组件
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
}
}
答
没有办法,如果你能保持在选择范围和要素目标,然后后应用它设置状态,即设置状态回调如下:
_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]);
})
}
答
它解决我的问题,初始化选择在回调的setState
let el = ev.target
this.setState({
sum: value
},() => {
el.setSelectionRange(1, 1)
})