时间戳

首页 > 解决方案 > 使用 Regex 参考累积状态数组有条件地触发 redux react 应用程序中的操作

javascript - 使用 Regex 参考累积状态数组有条件地触发 redux react 应用程序中的操作

问题描述

我正在用 React-Redux 构建一个简单的计算器。这个想法是通过 eval() 来自输入的表达式字符串来计算结果。我想通过删除重复的“。”来防止用户为同一组数字输入多个小数（“。”）。通过“退格”。但是，经过数小时的尝试，我正在努力让它工作。以下是相关代码...

=== Actions

const setInput = val => {
return {
    type: SET_INPUT,
    input: val
    };
};
const bkSpace = () => {
return {
    type: BK_SPACE
    };
};

=== Reducer
const CalReducer = ( state = defaultState, action) => {
switch (action.type) {
    case SET_INPUT:
        return {
            ...state,
            input: action.input,
            expression: [...state.expression.slice(0), 
                action.input.replace("×", "*").replace("÷", "/")]
                .join("").replace(space, "")
        };
    case BK_SPACE:
        return {
            ...state,
            expression: [...state.expression.slice(0, state.expression.length-1)].join("")
        };
    default: return state;
    };
};

=== React class component functions before render()
filter = (key) => {
    const {setInput, bkSpace, expression} = this.props
    switch (key) {
            case ".":
            setInput(key);
            if (/REGEX/g.test(expression) || expression[expression.length-1] === ".") {
                bkSpace();
                bkSpace(); //maybe?
                showMsg("You cannot contain two '.' in one numer."); 
                setTimeout(() => showMsg("0"), 1500);
                break;
            }
            break;
        default:
            setInput(key);
            break;
    };
};

尝试了我能想到的所有方法，当数字之前存在另一个小数时，仍然无法避免小数，例如防止小数输入或在小数已经出现后立即“退格”运算符后面的一组数字。

123+1.12. 
        ^prevent
12.3+112.1
        ^allow
123.3.
     ^prevent
...etc, like a normal calculator but prevent syntax error

通过使用正则表达式，当状态表达式通过累积输入而增长并且函数结果将变得一团糟时，我无法找到一种方法来正确包含（或排除）合格的数字组以执行所需的操作。（比如后退 1 个状态，允许在退格之前出现另一个小数，用户可以输入具有此状态间隙的其他数字以逃避限制并允许 123.1.12 之类的 /\d*[.]\d*[- + /]/ 或 /\d [.]\d[-+ /] / /\d*[.]\d*[-+ /]+|\d [.]\d*/ 等等。 t 允许在运算符后输入小数）感谢您的任何建议。

标签： javascriptreactjsregexreduxreact-redux

解决方案

通常，如果该行与此不匹配：

/^[-+/]*(?:(?:\d+(?:\.\d*)?|\.\d+)(?:[-+/]+(?:\d+(?:\.\d*)?|\.\d+))*)?[-+/]*$/

然后它在运算符之间的段内有 2 个小数。

https://regex101.com/r/e52FVw/1

 ^ 
 [-+/]* 
 (?:
    (?:
       \d+ 
       (?: \. \d* )?
     | \. \d+ 
    )
    (?:
       [-+/]+ 
       (?:
          \d+ 
          (?: \. \d* )?
        | \. \d+ 
       )
    )*
    
 )?
 [-+/]* 
 $

推荐阅读