// Counters component
import React, { Component } from 'react';
import Counter from './counter'
class Counters extends Component {
state = {
counters: [
{id:1 , value : 3},
{id:2 , value : 0},
{id:3 , value : 0},
{id:4 , value : 0}
]
}
handleReset = () => {
const counters = this.state.counters.map(counter=>{
counter.value = 0
return counter
})
this.setState({counters})
}
handleDelete = counterID=> {
this.setState({counters : this.state.counters.filter(c=>c.id !== counterID)})
}
handleIncrement = counter => {
const counters = [...this.state.counters]
const index = counters.indexOf(counter)
counters[index] = {...counter}
counters[index].value++
this.setState({counters})
}
**handleDecrement = counter => {
const counters = [...this.state.counters]
const index = counters.indexOf(counter)
counters[index] = {...counter}
if(counters[index].value <= 0){
counters[index].value === 0
this.setState({counters})
}else {
counters[index].value--
this.setState({counters})
}
}**
// handleDecrement = ()=> {
// if(this.props.counter.value <= 0)
// this.setState({value : 0})
// else
// this.setState({value : this.props.counter.value - 1})
// }
render() {
return (
<div>
<button onClick={this.handleReset} className="btn btn-primary btn-sm m-2">
Reset
</button>
{this.state.counters.map(counter=>
<Counter onIncrement={this.handleIncrement} onDecrement={this.handleDecrement} onDelete={this.handleDelete} key={counter.id} counter={counter} >
</Counter>)}
</div>
);
}
}
export default Counters;
// Counter component
import React , { Component } from 'react'
import { Button } from 'react-bootstrap'
// first component
class Counter extends Component {
render(){
return (
<div>
<span className={this.getBadgeClasses()}>{this.formatCounter()}</span>
<Button onClick={()=>this.props.onIncrement(this.props.counter)} variant="secondary" className="btn btn-sm ml-3" >Increment</Button>
<Button onClick={()=>this.props.onDecrement(this.props.counter)} variant="secondary" className="btn btn-sm ml-3" >Decrement</Button>
<Button onClick={()=>this.props.onDelete(this.props.counter.id)} className="btn btn-danger m-2">
Delete
</Button>
</div>
)
}
getBadgeClasses() {
let classes = "badge m-2 badge-";
classes += (this.props.counter.value === 0) ? "warning" : "primary";
return classes;
}
formatCounter(){
const { value } = this.props.counter
return value === 0 ? 'Zero' : value
}
}
export default Counter
question from:
https://stackoverflow.com/questions/65897531/expected-an-assignment-or-function-call-and-instead-saw-an-expression-no-unused 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…