Reactjs 使用React for下拉列表传递OnChange函数

我有一个支付组件和自定义下拉组件。我试图将名为handlePaymentImageChange的函数从父（付款）传递到子（下拉）以控制图像更改。然而，它并不像我预期的那样好用。我要做的是根据下拉菜单的选择显示图像。在我的例子中，如果值='Visa'->仅呈现Visa图像

详情：

在my Payment.js中

function Payment() {
  const [paymentImage, setPaymentImage] = useState({
    id: 0,
    value: ""
  });

  const handlePaymentImageChange = (e) => {
    const { name, value } = e.target;
    setPaymentImage({
      ...paymentImage,
      [name]: value
    });
  };

return (
    <div className="payment-container">
      <Dropdown
        title="Select payment"
        items={items}
        multiSelect={false}
        handlePaymentImageChange={handlePaymentImageChange}
      />

      {/* render specifed image based on the selected choice */}
      //REST RENDER CODE...
      // for example,     value = Visa -> render visa image only
      

    </div>
  );
 

功能支付（）{
常量[paymentImage，setPaymentImage]=useState({
id:0，
值：“”
});
const handlePaymentImageChange=（e）=>{
常量{name，value}=e.target；
setPaymentImage({
…paymentImage，
[名称]：值
});
};
返回(
{/*根据所选选项渲染指定的图像*/}
//REST渲染代码。。。
//例如，value=Visa->render Visa image only
);

在我的Dropdown.js中

import React, { useState } from "react";
import "./Dropdown.css";

function Dropdown({
  title,
  items = [],
  multiSelect = false,
  handlePaymentImageChange
}) {
  const [open, setOpen] = useState(false);
  const [selection, setSelection] = useState([]);
  const [selectedValue, setSelectedValue] = useState(title);

  //REST DROPDOWN TOGGLE FUNCTION
  ...

  return (
    <div className="dropdown-container">
      // pass the item.value to change the Payment state, then render the correct image
        {open && (
          <ul className="dropdown-list">
            {items.map((item) => (
              <li
                className="dropdown-list-item"
                key={item.id}
                onChange={() => handlePaymentImageChange(item.value)}
              >
                <button
                  type="button"
                  onClick={() => handleOnClick(item)}
                  value={item.value}
                >
                  <span>{item.value}</span>
                  <span>{isItemInSelection(item) && "Selected"}</span>
                </button>
              </li>
            ))}
          </ul>
        )
}
    </div>
  );
}

export default Dropdown;

import React，{useState}来自“React”；
导入“/Dropdown.css”；
函数下拉列表({
标题
项目=[]，
multiSelect=false，
handlePaymentImageChange
}) {
const[open，setOpen]=useState（false）；
const[selection，setSelection]=useState（[]）；
常量[selectedValue，setSelectedValue]=使用状态（标题）；
//REST下拉切换功能
...
返回(
//传递item.value以更改付款状态，然后呈现正确的图像
{打开&&(

{items.map（（item）=>(
handlePaymentImageChange（item.value）}
>
点击（项目）}
值={item.value}
>
{item.value}
{isItemInSelection（项目）&&“Selected”}

))}

)
}
);
}
导出默认下拉列表；

---

有什么解决方案吗？

有多个问题

在下拉组件中，您应该为onClick而不是onChange添加eventListener

在

handlePaymentImageChange

方法中，您正在使用

e.target.value

作为值。但在您的情况下，

e

本身就是值。所以你应该写

setPaymentImage({ …paymentImage， 价值：e });

渲染图像时，不进行任何检查。所以检查值是否为“Visa”，并呈现Visa图像等等

---

我已更新代码，请检查。

有多个问题

在下拉组件中，您应该为onClick而不是onChange添加eventListener

在

handlePaymentImageChange

方法中，您正在使用

e.target.value

作为值。但在您的情况下，

e

本身就是值。所以你应该写

setPaymentImage({ …paymentImage， 价值：e });

渲染图像时，不进行任何检查。所以检查值是否为“Visa”，并呈现Visa图像等等

---

我已经更新了代码，请检查。

更新了我的答案。请检查。更新我的答案。请查收。