如何删除光标前的值 - React

Question

我用 React 创建了一个 phone，无论您是按键还是使用键盘，它都会将数字存储在 input 中。

phone 工作正常，但按删除按钮或退格键总是会删除链中的最后一个值。

我需要按钮和退格键来删除光标位置之前的值。如果位置是3我想让按钮消除链中的数字2，如果是5则消除4 ...如何删除光标前的值？

编辑：感谢@Seba99，我解决了我的问题。这是最终代码：

我的 phone 组件：

class Telefono extends Component {
    constructor(props) {
        super(props);
        this.state = {
            numberClicked: '',
            inputContent: [],
            currentKey: '',
        };
        this.deleteClickNumber = this.deleteClickNumber.bind(this);
    }

    deletePrevNumber(){
        var string = this.state.inputContent.split("");
        var ctl = document.getElementById('inputTelephone');
        var startPos = ctl.selectionStart;
        var endPos = ctl.selectionEnd;
        string.splice((startPos - 1), 1);
        this.setState({
            inputContent: string.join(''),
            numberClicked: string.join(''),
        })
    }

    deleteClickNumber(evObject){
        this.change = setTimeout(() => {
            this.setState({
                addClickedBottoms: '',
            })
        }, 300)
        this.setState({
            currentKey: evObject.keyCode
        });
        if(this.state.addClickedBottoms === ''){
            this.setState({
                addClickedBottoms: 'clicked',
            })            
        }

        if (this.state.inputContent !== ''){
            this.deletePrevNumber();
        }  
    }


    render(){
        return(
            <div className="pad sb-content">
                <div className="dial-pad">
                    <div className="phoneString">
                        <input type="text" ref="inputTelephone" value={this.state.inputContent.toString()} onChange={this.handleKeyPress} onKeyDown={this.handleKeyDown}/>
                    </div>
                    <div className="digits">
                        <Numbers 
                            numbers={this.state.numbers} 
                            letters={this.state.letters}
                            addClicked={this.state.addClicked}  
                            updateNumber={this.updateNumber}
                            addClickedBottoms={this.state.addClickedBottoms}
                            deleteClickNumber={this.deleteClickNumber}
                        />
                    </div>

                    <div className="digits">
                        <div className="dig call"><Icon icon="telefono" className='ico-telefono'/><span>LLAMAR</span></div>
                    </div>
                </div>
            </div>
        );
    }
}

这是我的数字组件中的删除按钮

<div onClick={this.props.deleteClickNumber}>
  <Icon icon="borrar" className='ico-borrar'/>
</div>``

非常感谢您的帮助

Answer 1

这是因为slice(0,-1)总是删除数组中的最后一个元素...

截至 documentation：

A negative index can be used, indicating an offset from the end of the sequence. slice(2,-1) extracts the third element through the second-to-last element in the sequence.

你应该看看 sPlice function 它删除了你想要在选定索引处的元素数：

this.state.inputContent.splice(IndexOfTheCursor, 1);
this.setState({
     inputContent: this.state.inputContent
})

如何删除光标前的值 - React

How to remove the value before the cursor - React

javascript

cursor-position

reactjs