장바구니 | 제품 수량 조절하기 (0 이상만 되도록 하기. 수정 필요)

화살표 버튼을 누르면 ==> input 안의 숫자가 변경된다.

색각
input - 화살표 버튼이 잘 눌려지는지 확인한다.
output - input 안의 숫자 (state)가 변경되는 것을 확인한다.

1. input 셋팅

(상위 컴포넌트 MainBasket에서 상속받음)
const { prImg, prTitle, prPrice, prDiscount, ✅prCount } = this.props;

<div className="item_count">
	<input type="text" value={prCount} onChange={this.countOnChange} />
	<div className="count_box">
            <i className="fas fa-sort-up"></i>
            <i className="fas fa-sort-down"></i>
	</div>
</div>

• input의 값을 최상의 컴포넌트로부터 상속받았다. 아직 back과 통신하기 전이기 떄문에 MockDate []를 사용하였고, prCount 값을 가져옴.

• 화살표 버튼을 누르면, 값이 up, down으로 변하기때문에 onChange 메서드를 넣어주고 함수를 만들어주기로 하였다.

2. up

• < Basket / >

<script>
class Basket extends Component {
  constructor() {
    super();
    this.state = {
      orderList: [],
    };
  }
  
changeCount = (id, count) => {
    let { orderList } = this.state;
    this.setState({
      orderList: orderList.filter(order => {
        if (order.id === id) {
          order.count = count;
        }
        return order;
      }),
    });
  };
 }
 </script>

최상위 컴포넌트인 basket에서 만든 changeCount 함수

=> orderList 배열에서 각 객체의 count value를 count로 반환해주는 함수입니다.
그럼 up button을 눌렀을 때 1씩 증가해야 합니다. 이것은 계산이기 때문에 Item component에서 함수를 종속받은 후, 계산해 줍니다.

• Item 컴포넌트

<script>

(함수)
upClick = () => {
    this.props.changeCount(this.props.id, this.props.prCount + 1);
  };

(up)
<i onClick={this.upClick} className="fas fa-sort-up"></i>

</script>

값이 click을 하면 값이 올라가기에 upClick함수를 만들어주었다.
✅ click을 하는건 Item 컴포넌트 안인데 왜 상위 컴포넌트에서 함수를 상속받아왔는가?
그것은 상품의 id를 상위에서 받아와야 하기 때문이다. 더 자세한 내용은 앞선 장바구니를 삭제하는 글에 있다

✅ 알게 된 것: i tag에 button으로 감싸주지 않아도, onClick함수를 넣어줌으로써 click이 가능하게 된다.

3. down

질문

up과 down 모두
방법 1.

this.setState({
      orderList: orderList.filter(order => {
        if (order.id === id && order.id >= 0) {
          order.count = count;
          console.log(order.count);
        }
        return order;
      }),
    });

방법 2.

<input
            type="number"
            value={prCount}
            onChange={this.countOnChange}
            min="0"
          />