Как к state +/- 1?

Question

[Ninja Mate]

Как в данном случае управлять значением State? задача простая, нужно содержать число и -/+ 1 кнопками, при этом отображать на странице. Оба варианта не работают.

eng_cat_ackyes: 0,
eng_cat_ackno: 0,
...

<p>Acknowledged</p>
  <Row>
            <Button onChange={()=>this.setState({ eng_cat_ackyes: ++this.state.eng_cat_ackyes})}> + </Button>
                    <Input value={this.state.eng_cat_ackyes}
                               onChange={(event)=>this.setState({ eng_cat_ackyes: event.target.value})}
                               type="text" />
            <Button onChange={()=>this.setState({ eng_cat_ackyes: --this.state.eng_cat_ackyes})}> - </Button>
   </Row>

<p>Not Acknowledged</p>
    <Row>
              <Button onChange={()=>this.setState({ eng_cat_ackyes: this.state.eng_cat_ackyes+1})}> + </Button>
                       {this.state.eng_cat_ackno}
             <Button onChange={()=>this.setState({ eng_cat_ackyes: this.state.eng_cat_ackyes-1})}> - </Button>
   </Row>

Answer 1

[MhMadHamster]

вы пытаетесь изменить state, к state в реакт надо относится так, как будто оно имутабельно, то есть нельзя установить state на основании предыдущего state + что-то, потому как нельзя поменять сам state, т.е. this.state.number++ не сработает

https://jsfiddle.net/k1wukhzq/

Comments

[Ninja Mate]

не очень понятна логика реакта, почему тогда onChange={(event)=>this.setState({ state: event.target.value})} работает, а если напрямую прибавить или онять число, то не мутабельный.

Answer 2

[Ninja Mate]

Секрет разгадан. Меняем onChange на onClick и все работает в первоначальном варианте