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

Question

我正在尝试制作一个React计算器。 它主要完成，但我有一个问题，我不知道如何纠正：我似乎无法限制用户可以输入的运算符的数量（例如，我想限制“++++”到只是“+”并且还阻止两个运营商加入：+ - 必须成为 - ）。 我每次用户进入操作员时都尝试重置状态，但没有骰子。 我在这里很丢失。 我想到了一个正则表达式，但它似乎是相当有问题的（尝试太多的上下文）。

class Calculator extends Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(evt) {
    const id = evt.target.id;
    const result = evt.target.value;

    this.setState(prevState => ({
      value: `${prevState.value}${result}`.replace(/^0+\B/, '')
    }));

    if (id === 'equals') {
      this.setState({ value: math.eval(this.state.value) });
    } else if (id === 'clear') {
      this.setState({ value: 0 });
    }
  }
}

Answer 1

您可以使用操作和非常类型的字符保存列表。 然后在插入之前检查是否是一个操作以防止添加多个

例

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将不起作用。 但是从这里开始你可以调整它以满足你的需求

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

Answer 2

您可以使用正则表达式来解决此问题。 使用基于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"))

这里有一个功能齐全的JSFiddle供您试用