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

【问题标题】：How can I get reactstrap dropdown value to credit card component?如何获得信用卡组件的 reactstrap 下拉值？
【发布时间】：2021-03-18 05:12:16
【问题描述】：

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

codesandbox.io/s/purple-frost-lknxs

【问题讨论】：

@Turtlean 我觉得现在还可以codesandbox.io/s/purple-frost-lknxs
是的，现在开始工作了！让我们移除上面所有的 cmets 以减少噪音，因为它们不再需要了

标签： reactjs react-hooks reactstrap

【解决方案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: ""
}

【讨论】：