如何獲得信用卡組件的 reactstrap 下拉值？

Question

我的英語不好，我有信用卡部分。 當輸入更改獲取其他組件的值時。 但我希望從下拉列表中獲取到期月份和年份。 這是代碼，有人可以幫忙嗎？

codeandbox.io/s/purple-frost-lknxs

Answer 1

CreditCardForm接收來自Payment的onChange回調，用於更新name 、 number 、 expiryMonth和expiryYear屬性。

這里的問題是expiryMonth和expiryYear的onChange回調是從DropdownToggle's onChange事件觸發的，而不是從DropdownItem -> div -> onClick事件觸發的，這是您真正感興趣的事件：

<Dropdown isOpen={dropdownOpen} toggle={toggle}>
  <DropdownToggle
    caret
    id="expiryMonth"
    name="expiryMonth"
    value={expiryMonth}
    onChange={(e) =>  <-- It's being called HERE
      onChange({ key: "expiryMonth", value: e.target.value })
    }
  >
    {dropDownValue}
  </DropdownToggle>
  <DropdownMenu>
    {select.map((item, index) => {
      return (
        <DropdownItem
          key={`${item.id}--${index}`}
          className={classNames({
            active: dropDownValue === item.text
          })}
        >
          <div onClick={changeValue}>{item.value}</div> <-- Should be called HERE
        </DropdownItem>
      );
    })}
  </DropdownMenu>
</Dropdown>

一個簡單的解決方案是擴展changeValue和changeValue2以使用正確的鍵調用onChange回調：

function changeValue(e) {
  setDropDownValue(e.currentTarget.textContent);
  onChange({ key: "expiryMonth", e.currentTarget.textContent })
}

function changeValue2(e) {
  setDropDownValue2(e.currentTarget.textContent);
  onChange({ key: "expiryYear", e.currentTarget.textContent })
}

更改Payment組件中的initialState也是一個好主意，因此initialState以與下拉列表相同的值開始：

const initialState = {
  name: "",
  number: "",
  expiryMonth: "01",
  expiryYear: "01",
  cvv: ""
}