如何在反应中将选择选项值传递给按钮 onclick？

Question

我可以传递我的选择选项的值，但我改变了主意，想首先在 onClick function 的按钮上传递值。谢谢

 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;