Question

我已经成功实现了一个增量器应用，该应用在每侧显示带有+和-的数字。单击任一时，数字分别上升或下降。但是因为if语句在jsx中的工作方式不同，所以我难以设置数量限制，例如不能低于零。

我尝试放入if语句，但是它们不起作用。例如，如何使它达到某个最小值或最大值后，如果单击+或-不会改变？

class App extends Component {
  constructor () {
    super()
    this.state = {
      num: 1
    }
    this.addNum = this.addNum.bind(this)
    this.minusNum = this.minusNum.bind(this)
  }

  addNum() {
    this.setState({

      num: this.state.num +1
    }, function() {
      console.log('number of issues is ' + this.state.num)
    })
  }

  minusNum() {
    this.setState({



      num: this.state.num - 1
    }, function() {
    })
  }
`
  render() { 
     return (
      <div>

     <body>

      <div className="incrementer">
        <div>
            <h2 className="minus" onClick={this.minusNum}>-</h2>
        </div>
        <div>
        <h2 className="number">{this.state.num}</h2>
        </div>
        <div>

              <h2 className="plus" onClick={this.addNum}>+</h2>

            </div>
      </div>

      </body>
       </div>
    );
  }
}
export default App;

Answer 1

在您的addNum和minusNum方法中检查变量的范围。

在React.js中没有实现状态约束的“内置”方法（例如，可能使用数据库列的方式）。

Answer 2

您应该实现自己的逻辑来控制您不想发生的极端情况。

这是您的代码，具有其他功能和ES6箭头功能（无绑定）。

要更改最大和最小数字，只需编辑<input type="{{$device=='d' ? 'password' :'tel'}}" pattern="[0-9]*" class="form-control password-mask {{$errors->has('password') ? 'invalid' :''}}" autocomplete="current-password" id="password" name="password">和minValue

maxValue

Answer 3

只需在减号函数中添加检查，如果状态中的当前值为零，则不执行任何操作。

this.state = {
  num: 1,
  minValue: 0,
  maxValue: 10
}

minusNum() {
  if (this.state.num === this.state.minValue) {
    return;
  }

  this.setState({
    num: this.state.num - 1
  }, function() {})
}

addNum() {
  // assuming you have maxValue in state 
  if (this.state.num > this.state.maxValue) {
    return;
  }

  this.setState({

    num: this.state.num + 1
  }, function() {
    console.log('number of issues is ' + this.state.num)
  })
}

试图实现一个增量器

3 个答案: