React Calculator：如何防止出现多个小数？

Question

我几乎已经使用 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>


        );
    }
}

提前致谢！

Answer 1

您可以查看传入的值，检查它是否是 . 并检查输入是否已经有一个。如果是，什么都不做，否则将值添加到输入的末尾：

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

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

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

Answer 2

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

Answer 3

正则表达式可以帮到你。

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

React Calculator：如何防止出现多个小数？

React Calculator: How to prevent multiple decimals?

javascript

calculator

reactjs