反應計算器：輸入標簽值錯誤地顯示小數和其他符號

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>);
}

Answer 1

這是因為輸入框有屬性dir="rtl"

刪除dir="rtl"以修復它。 要使文本出現在輸入框的右側，請改用style="text-align:right" 。

 <label>dir="rtl"</label> <br/><input dir="rtl" value="123." /> <br/><br/> <label>dir="ltr" (default)</label> <br/><input style="text-align:right" value="123." />