如何获得信用卡组件的 reactstrap 下拉值？

Question

我的英语不好，我有信用卡成分。当输入更改为其他组件获取价值时。但我希望从下拉列表中获取到期月份和年份。这是代码，有人可以帮忙吗？

codesandbox.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: ""
}

如何获得信用卡组件的 reactstrap 下拉值？

How can I get reactstrap dropdown value to credit card component?

reactjs

react-hooks

reactstrap