Попытка реализовать инкремент - PullRequest
Новая
       11

Попытка реализовать инкремент

0 голосов
/ 13 апреля 2019

Я успешно реализовал приложение инкремента, которое показывает число с + и - на каждой стороне. При нажатии любого из них число увеличивается или уменьшается соответственно. Но потому что, если операторы работают по-другому в 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;

Ответы [ 3 ]

0 голосов
/ 13 апреля 2019

Вы должны реализовать свою собственную логику для управления крайними случаями, которые не должны происходить.

Вот ваш код с дополнительными функциями и функциями стрелок ES6 (без привязки).

Чтобы изменить максимальные и минимальные числа, просто отредактируйте minValue и maxValue

import React from 'react'

class App extends React.Component {
    state = {
        num: 1
    }

    minValue = 0
    maxValue = 10

    addNum = () => {
        const { num } = this.state

        if (num < this.maxValue) {
            this.setState({ num: num + 1 }, this.log)
        }
    }

    minusNum = () => {
        const { num } = this.state

        if (num > this.minValue) {
            this.setState({ num: num - 1 }, this.log)
        }
    }

    log = () => {
        console.log('number of issues is ' + this.state.num)
    }

    render() {
        return (
            <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>
        )
    }
}

export default App
0 голосов
/ 13 апреля 2019

Просто добавьте проверку в вашу функцию минус, если текущее значение в состоянии равно нулю, ничего не делайте. 

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)
  })
}
0 голосов
/ 13 апреля 2019

Проверьте границы переменной в ваших методах addNum и minusNum.

Не существует «встроенных» способов реализации ограничений состояния в React.js (как это можно сделать, например, с помощью столбца базы данных).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...