[レスポンス運賃]タブドロップダウンメニュー

インプリメンテーションコード

 shippingButtonClick = event => {
    const { buttonValue } = this.state;
    this.setState({
      buttonValue: buttonValue === true ? false : true,
    });
  };

.
.
.
.



<div className="shippingFeeBox">
              <div className="shippingFee">배송비</div>
              <div className="shippingListsBox">
                <ul className="shippingFeeLists">
                  개당 {productInfo.shippingFee}원
                </ul>
                <li
                  className={
                    buttonValue === true ? 'shippingFeeNone' : 'shippingLists'
                  }
                >
                  <div className="typeBox">
                    <p className="shippingType">배송 타입</p>
                    <p className="shippingTypeValue">
                      {productInfo.shippingTypeValue}
                    </p>
                  </div>
                  <div className="typeBox">
                    <p className="payType">결제 방식</p>
                    <p className="payTypeValue">{productInfo.payTypeValue}</p>
                  </div>
                </li>
              </div>
              <bitton
                className="shippingFeeButton"
                onClick={this.shippingButtonClick}
              >
                ∨
              </bitton>

コード運動原理

をクリックするたびにsetStateで条件式を管理し、ステータス値をtrueに変更してfalseの場合falseの場合trueに変更できます.

結果