React计算器：输入标签值显示的小数位数和其他符号错误

Question

[我正在使用React制作计算器，本质上，我对按钮进行了编程以触发功能numberDisplay()，该函数将按按钮的相应值附加到字符串（状态）。我的问题是，为什么句号之类的符号字符看起来好像不是在输入字段中被推到字符串的前面一样呢？例如，我按此顺序按1，3，5按钮，输入字段正确显示135，但是当我输入1、3、5时，它像. 135`一样在前面显示小数。

我做一个控制台日志，十进制肯定是字符串的结尾，所以我对为什么将十进制推到最前面感到非常困惑。最后，操作员按钮重置了我的状态，但是我进行了测试，并且符号& + -和/都被推到了输入字段的最前面。

class Calculator extends React.Component{
constructor(props){
    super(props);
    this.state = {
        expFrag:'0',
        expression:''
    };
};

    componentDidMount(){
        this.keypress();
    }

    numberDisplay = (input) => {
        //decimal isnt placed at the end of the string. 
        //decimal  replaces "0" at the beginning of the state.
        if(this.state.expFrag.includes('.') === true && input === '.'){
            return;
        }else{
            if( this.state.expFrag === '0' && input === '0'){
                return;
            }else if (this.state.expFrag === '0' && input != '0'){
                this.setState({
                    expFrag:input,
                    expression:this.state.expression
                });
            }else{
              this.setState({
                expFrag:this.state.expFrag.concat(input),
                expression:this.state.expression
              });
            };
        };
    };

};

appendReset = (operator) =>{
        this.numberDisplay(operator);
        setTimeout(()=>{this.expAppend()},10);
        setTimeout(()=>{this.resetExpFrag()},10);
    };

render(){
    return(
   <div>
         <h1>Calculator</h1>
         <div id="parent">
              <input id="display" dir="rtl" value={this.state.expFrag}/><br/>
              <div className="b">
                <button id="clearEntry" onClick={ () => this.clearEntry()}>CE</button>
                <button id="allClear" onClick={ () => this.clear()}>C</button>
                <button id="backspace" onClick={() => this.backspace()}>bck</button>
                <button id="division"onClick={() => this.appendReset('/')}>/</button>
             </div>
             <div className="b">
                <button id="seven" onClick ={() => this.numberDisplay('7')}>7</button> 
                <button id="eight" onClick ={() => this.numberDisplay('8')}>8</button>
                <button id="nine" onClick ={() => this.numberDisplay('9')}>9</button>
                <button id="multiply" onClick ={ () => this.appendReset('X')}>X</button>
             </div>
             <div className="b">
                <button id="six" onClick ={() => this.numberDisplay('6')}>6</button>
                <button id="five" onClick ={() => this.numberDisplay('5')}>5</button>
                <button id="four" onClick ={() => this.numberDisplay('4')}>4</button>
                <button id="subtract" onClick ={() => this.appendReset('-')}>-</button>
             </div>
             <div className="b">
                <button id="one" onClick ={() => this.numberDisplay('1')}>1</button>
                <button id="two" onClick ={() => this.numberDisplay('M')}>2</button>
                <button id="three" onClick ={() => this.numberDisplay('P')}>3</button>
                <button id="add" onClick ={() => this.appendReset('+')}>+</button>
             </div>
             <div className="b">
                <button id="sign" onClick ={() => this.sign()}>+/-</button>
                <button id="zero" onClick ={() => this.numberDisplay('0')}>0</button>
                <button id="decimal" onClick ={() => this.numberDisplay('.')}>.</button>
                <button id="result">=</button>
             </div>
             <div className="b">
              <button id="leftParenthesis">(</button>
              <button id="rightParenthesis">)</button>
              <button id="test" onClick ={()=> this.show()}>TEST</button>
              <button id="test" onClick ={()=> this.numberDisplay('&')}>&</button>


             </div>
        </div>
    </div>);
}

我正在使用React制作一个计算器，本质上，我对按钮进行了编程，以触发一个函数numberDisplay（），该函数将按下的按钮的相应值附加到字符串（状态）上。我的...

Answer 1

因为输入框具有属性dir="rtl"