javascript - react 计算器 : limiting number of inputs

Question

我正在尝试制作一个 React 计算器。大部分都完成了，但我有一个问题我不知道如何纠正:我似乎无法限制用户可以输入的运算符数量(例如，我想将“++++”限制为只是 "+"并且还可以防止两个运算符连接:+- 必须变为 -)。每次用户输入运算符(operator)时，我都尝试重置状态，但没有骰子。我在这里严重迷路了。我想到了正则表达式，但它似乎相当有问题(尝试的上下文太多)。

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

您可以使用正则表达式来解决这个问题。使用基于 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 here for you to try out