时间戳

首页 > 解决方案 > React Calculator：输入标签值显示小数和其他符号不正确

javascript - React Calculator：输入标签值显示小数和其他符号不正确

问题描述

我正在使用 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>);
}

标签： javascripthtmlreactjsjsx

解决方案

是因为输入框有属性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." />

推荐阅读