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

Posted 2023-03-23

【中文标题】如何获得信用卡组件的 reactstrap 下拉值？

【英文标题】：How can I get reactstrap dropdown value to credit card component?

【发布时间】：2021-03-18 05:12:16

【问题描述】：

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

codesandbox.io/s/purple-frost-lknxs

【问题讨论】：

@Turtlean 我觉得现在还可以codesandbox.io/s/purple-frost-lknxs

是的，现在开始工作了！让我们移除上面所有的 cmets 以减少噪音，因为它们不再需要了

【参考方案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: ""