如何将 select-options 值传递给反应中的按钮 onclick？

Question

我可以传递我的 select-options 的值，但我改变了主意，想先在 onClick 函数的按钮上传递值。谢谢

import { useSelector, useDispatch } from "react-redux";
const Purchase = () => {
  const products = useSelector(state => state.products);
  const dispatch = useDispatch();
  const purchaseHandler = e => {
      let pName = e.target.options[e.target.selectedIndex].text;
      let price = e.target.value;
      let obj = { pName, price };
      dispatch({ type: "PURCHASE", payLoad: obj });
  };
  return (
      <div>
          <select onChange={e => purchaseHandler(e)}>
              {products.map((product, index) => {
                  return (
                      <option value={product.price} key={index}>
                          {product.pName} - ${product.price}
                      </option>
                  );
              })}
          </select>
          <button onClick={purchaseHandler} className="addToCart">
              Add to Cart
          </button>
      </div>
  );
};
export default Purchase;

Answer 1

选择更改时保存 productIndex，并在单击按钮时使用索引从 products 数组中获取 product。

像下面这样尝试

import { useSelector, useDispatch } from "react-redux";

const Purchase = () => {
    const products = useSelector(state => state.products);
    const dispatch = useDispatch();

    const [productIndex, setProductIndex] = useState(0);

    const purchaseHandler = () => {
        dispatch({ type: "PURCHASE", payLoad: products[productIndex] });
    };
    return (
        <div>
            <select
                onChange={e => {
                    setProductIndex(e.target.value);
                }}
            >
                {products.map((product, index) => {
                    return (
                        <option value={index} key={index}>
                            {product.pName} - ${product.price}
                        </option>
                    );
                })}
            </select>
            <button onClick={purchaseHandler} className="addToCart">
                Add to Cart
            </button>
        </div>
    );
};

export default Purchase;

如何将 select-options 值传递给反应中的按钮 onclick？

How to pass select-options value to button onclick in react?

javascript

button

jsx

reactjs