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 here for you to try out

React计算器：限制输入数量

2 个答案: