Javascript 反应计算器：如何防止多个小数？

使用React，我几乎完成了一个简单的计算器的构建。 我只是有一个多小数的问题。我试着写一个条件，但它不起作用。你能帮帮我吗

以下是我代码的一部分：

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            input: '0'
        };
    }


    addToInput = e => {
        const value = e.target.value;
        const oldValue = this.state.input;

        if (this.state.input != '0') {
            this.setState({ input: (this.state.input + value) });

        } else if (value == '.' && oldValue.includes('.')) {
            console.log('Mulitple decimals');
        } else {
            this.setState({ input: value });
        }
    };

    render() {
        return (<Button addToInput={ this.addToInput } />);
    }
}

class Button extends React.Component {

    render() {
        return (

            <div className="row">
                <button
                    value="."
                    id="decimal"
                    onClick={ this.props.addToInput }
                >.
                </button>
                <button
                    value="0"
                    id="zero"
                    onClick={ this.props.addToInput }
                >0
                </button>
                <button
                    value="-"
                    id="subtract"
                    onClick={ this.props.addToInput }
                >-
                </button>
            </div>


        );
    }
}

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
输入：“0”
};
}
addToInput=e=>{
常量值=e.target.value；
const oldValue=this.state.input；
如果（this.state.input！=“0”）{
this.setState（{input:（this.state.input+value）}）；
}else if（value='.&&oldValue.includes（'.'））{
console.log（'mullitple decimals'）；
}否则{
this.setState（{input:value}）；
}
};
render（）{
返回（）；
}
}
类按钮扩展了React.Component{
render（）{
返回(
.
0
-
);
}
}

---

提前谢谢你

您可以查看输入的值，检查它是否为

，并检查输入是否已经有一个。如果有，则不执行任何操作，否则将值添加到输入的末尾：

addToInput = e => {
  const { value } = e.target;
  const { input } = this.state;

  if (value === "." && input.includes(".")) {
    return;
  }

  this.setState({ input: `${input}${value}` });
};

---

您可以查看输入的值，检查它是否为

，并检查输入是否已经有一个。如果有，则不执行任何操作，否则将值添加到输入的末尾：

addToInput = e => {
  const { value } = e.target;
  const { input } = this.state;

  if (value === "." && input.includes(".")) {
    return;
  }

  this.setState({ input: `${input}${value}` });
};

---

将您的

addToInput

更改如下：

    addToInput = e => {
        const value = e.target.value;
        const oldValue = this.state.input;

        if (value === '.' && oldValue.includes('.')) {
            console.log('Mulitple decimals');
            return;
        }

        if (this.state.input !== '0') {
            this.setState({ input: (this.state.input + value) });

        } else {
            this.setState({ input: value });
        }
    };

您遇到问题的原因：

    addToInput = e => {
        const value = e.target.value;
        const oldValue = this.state.input;

        if (this.state.input !== '0') {
            // after first addToInput you will end up here ALWAYS
            this.setState({ input: (this.state.input + value) });
        } else if (value === '.' && oldValue.includes('.')) {
            // You will never be here because this.state.input !== '0' is always true after first addToInput
            console.log('Mulitple decimals'); 
        } else {
            // you will end up here only when you lunch your addToInput first time
            this.setState({ input: value });
        }
    };

---

将您的

addToInput

更改如下：

    addToInput = e => {
        const value = e.target.value;
        const oldValue = this.state.input;

        if (value === '.' && oldValue.includes('.')) {
            console.log('Mulitple decimals');
            return;
        }

        if (this.state.input !== '0') {
            this.setState({ input: (this.state.input + value) });

        } else {
            this.setState({ input: value });
        }
    };

您遇到问题的原因：

    addToInput = e => {
        const value = e.target.value;
        const oldValue = this.state.input;

        if (this.state.input !== '0') {
            // after first addToInput you will end up here ALWAYS
            this.setState({ input: (this.state.input + value) });
        } else if (value === '.' && oldValue.includes('.')) {
            // You will never be here because this.state.input !== '0' is always true after first addToInput
            console.log('Mulitple decimals'); 
        } else {
            // you will end up here only when you lunch your addToInput first time
            this.setState({ input: value });
        }
    };

---

正则表达式可以帮助你

const regex = /^[1-9]\d*(\.\d+)?$/;

然后您可以检查您的值：

regex.test('222') // true
regex.test('222.') // false
regex.test('222.0') // true
regex.test('222.0.1') // false
regex.test('222.01234') // true
regex.test('abc') // false

---

正则表达式可以帮助你

const regex = /^[1-9]\d*(\.\d+)?$/;

然后您可以检查您的值：

regex.test('222') // true
regex.test('222.') // false
regex.test('222.0') // true
regex.test('222.0.1') // false
regex.test('222.01234') // true
regex.test('abc') // false

---

---

您的代码缺少

addToInput

的右括号。您是对的。非常感谢。虽然我的原始代码有括号。这不是问题。您的代码缺少

addToInput

的右括号。您是对的。非常感谢。虽然我的原始代码有括号。这不是问题。问题是它没有使用条件输入。包括（“.”）。我不知道为什么。我编辑了我的代码，所以如果input.includes（“.”），它会记录短语“多个小数”，但它不会记录任何内容。@KseniaKartoshkina您在哪里呈现输入？每次调用

addToInput（）

时，

this.state.input

的值是多少？问题是它没有使用条件输入.includes（“.”）。我不知道为什么。我编辑了我的代码，所以如果input.includes（“.”），它会记录短语“多个小数”，但它不会记录任何内容。@KseniaKartoshkina您在哪里呈现输入？每次调用

addToInput（）

，this.state.input的

值是多少？我不知道我的代码出了什么问题，但你的解决方案不起作用。到底什么不起作用
（value='.&&oldValue.includes（'.）
您确定这里必须是
&
吗？当您的新值正好
并且旧值包含
时，您将得到
假
（假和真）==false
。然后，尝试以下添加
正则表达式=/^[1-9]\d*（\.\d+）“$/；
到构造函数。和
else if（value='.&&oldValue.includes（'.）
必须替换为
else if（this.regex.test（value）|
oldValue.includes（'.）
希望这有帮助。我不知道我的代码有什么问题，但你的解决方案不起作用。到底什么不起作用？
（value='.&&oldValue.includes（'.）
你确定这里一定是
&
吗？当你的新值正好
而旧值包含
时，你会得到
false
-
（false&&true）===false
。然后，试着将
正则表达式=/^[1-9]\d*（\.\d+）$/；
添加到构造函数中。还有
如果（value=='.&&oldValue.includes（'））
必须替换为
else if（this.regex.test（value）| | oldValue.includes（'.'）
希望这有帮助。这奏效了！现在我明白了，非常感谢！@KseniaKartoshkina通常这是一个很好的语气来接受解决您的问题的答案：）哦，对不起！我不知道怎么做。这是我在这里的第一个问题。：）这奏效了！现在我明白了，非常感谢@KseniaKartoshkina通常，接受解决问题的答案是一种很好的语气：）哦，对不起！我不知道该怎么做。这是我在这里的第一个问题。：）