Javascript 反应计算器：限制输入数量

我在试着做一个计算器。基本上已经完成了，但我有一个问题不知道如何纠正：我似乎无法限制用户可以输入的运算符数量（例如，我想将“++++”限制为“+”，并防止两个运算符合并：+-必须变成-）。每次用户输入运算符时，我都尝试重置状态，但没有骰子。我在这里迷路了。我考虑过使用正则表达式，但它似乎有很大的问题（上下文太多，无法尝试）

---

您可以保存包含操作和输入字符的列表。然后在插入之前，检查这是否是一个操作，以防止添加多个

示例

const ops = ['/', '+', '-', '^']
this.setState({lastChar: result})

// Before setState with the full formula
if(this.state.lastChar === result && ops.includes(result)) else if (ops.includes(this.state.lastChat) && ops.includes(result)) return;

假设

result

仅为键入/单击的字符

问题

这个策略绝对不是完美的。例如，键入1+-2或1*-3将不起作用。但从现在起，你可以调整它以满足你的需要

---

我在打电话，很抱歉格式不正确

您可以使用正则表达式来解决此问题。使用基于

includes（）

的方法的主要问题是它没有在输入字符串中强制执行正确的格式。也许你可以用这样的正则表达式

/^\d*([/\+-/*=]\d+)*$/gi

这将防止出现诸如多个操作数之类的问题，如

++

，等等：

class Calculator extends React.Component {

  constructor(props) {


 super(props);
    this.state = { value: "" };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(evt) {

    const result = evt.target.value;

    // Update state
    this.setState({
      value: result
    });

    // Comine previous state with input value
    //const combination = `${ this.state.value }${result}`;
    console.log(result, 'combination', result)
        // Use regular expression to check valid input. If invalid
    // prevent further processing
    if(!result.match(/^\d*([/\+-/*=]\d+)*$/gi)) {
      console.error('Invalid input')
      return
    }

        this.setState({ calculated: eval(result) });

  }

  render() {
  return <h1>
  <input value={this.state.value} onChange={(e) => this.handleClick(e)}/>
  <p>{ this.state.calculated }</p>
  </h1>
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))

类计算器扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={value:：}；
this.handleClick=this.handleClick.bind（this）；
}
handleClick（evt）{
const result=evt.target.value；
//更新状态
这是我的国家({
值：结果
});
//将上一个状态与输入值合并
//常量组合=`${this.state.value}${result}`；
console.log（结果“组合”，结果）
//使用正则表达式检查有效输入。如果无效
//阻止进一步处理
如果（！result.match（/^\d*（[/\+-/*=]\d+*$/gi））{
控制台。错误（'无效输入'）
返回
}
this.setState（{calculated:eval（result）}）；
}
render（）{
返回
this.handleClick（e）}/>
{this.state.computed}

}
}
ReactDOM.render（，document.querySelector（“#app”））

---

有一个功能正常的

它可以工作。但是我仍然需要使它不允许不同的操作符（例如，不能同时+和-）。有什么想法吗？谢谢在阅读评论之前，我对我的回答进行了修改，但实际上我提到你的要求是不完善的，因为它限制了计算器的功能。但是React说这是一个无效的正则表达式。我需要它不仅能阻止字符的重复，还能防止不同的操作符出现（例如，“+-”必须变成“-”）不，它删除了所有的点击事件。假设正则表达式将所有内容都检测为无效输入，因为这是控制台记录的内容。但是它也会阻止“=”和“清除”按钮，并且不会让你改变主意（例如，“+”变成永久的“+”，直到你输入另一个数字）哈哈哈，对不起，我不想听起来忘恩负义，但事实并非如此：现在你不能每次添加多个数字（例如，你不能输入36，只有3或6）。加上它的console.log组合，不使用它。

class Calculator extends React.Component {

  constructor(props) {


 super(props);
    this.state = { value: "" };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(evt) {

    const result = evt.target.value;

    // Update state
    this.setState({
      value: result
    });

    // Comine previous state with input value
    //const combination = `${ this.state.value }${result}`;
    console.log(result, 'combination', result)
        // Use regular expression to check valid input. If invalid
    // prevent further processing
    if(!result.match(/^\d*([/\+-/*=]\d+)*$/gi)) {
      console.error('Invalid input')
      return
    }

        this.setState({ calculated: eval(result) });

  }

  render() {
  return <h1>
  <input value={this.state.value} onChange={(e) => this.handleClick(e)}/>
  <p>{ this.state.calculated }</p>
  </h1>
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))