如何在 useState 上设置输入和下拉列表的值？

Question

我对使用 React 或实际上编程还是很陌生哈哈。

我正在练习创建在线商店，并且几乎所有功能都可以正常运行。我的问题是我希望客户能够 select 尺寸和数量并将其设置在 useState 上以将该信息传递到购物车。

这是我的代码：

import { Image, Grid, Icon, Button, Form } from "semantic-ui-react";
import { size } from "lodash";
import classNames from "classnames";
import useAuth from "../../../hooks/useAuth";
import useCart from "../../../hooks/useCart";
import {
  isFavoriteApi,
  addFavoriteApi,
  deleteFavoriteApi,
} from "../../../Api/favorite";
import CarouselScreenshots from "../CarouselScreenshots";
import TabsItem from "../TabsItem"


export default function HeaderItem(props) {
  const { item } = props;
  const { poster, title, screenshots } = item;
  

  return (
    <div>
      <Grid className="header-item">
        <Grid.Column mobile={16} tablet={6} computer={8}>
          <Image src={poster.url} alt={title} fluid />
          <CarouselScreenshots title={title} screenshots={screenshots} />
        </Grid.Column>
        <Grid.Column mobile={16} tablet={10} computer={8}>
          <Info item={item} />
        </Grid.Column>
      </Grid>
    </div>
  );
}

function Info(props) {
  const { item } = props;
  const { title, summary, price, discount, url } = item;
  const [isFavorites, setIsFavorites] = useState(false);
  const [reloadFavorite, setReloadFavorite] = useState(false);
  const { auth, logout } = useAuth();
  const { addProductCart } = useCart();
  const [sizeItem, setSizeItem] = useState(null);
  const [quantity, setQuantity] = useState(null);

  useEffect(() => {
    (async () => {
      const response = await isFavoriteApi(auth.idUser, item.id, logout);
      if (size(response) > 0) setIsFavorites(true);
      else setIsFavorites(false);
    })();
    setReloadFavorite(false);
  }, [item, reloadFavorite]);

  const addFavorite = async () => {
    if (auth) {
      await addFavoriteApi(auth.idUser, item.id, logout);
      setReloadFavorite(true);
    }
  };

  const deleteFavorite = async () => {
    if (auth) {
      await deleteFavoriteApi(auth.idUser, item.id, logout);
      setReloadFavorite(true);
    }
  };

  const sizes = [
    {
      key: 'Small',
      text: 'Small',
      value: 'Small',
      name: 'size'
    },
    {
      key: 'Medium',
      text: 'Medium',
      value: 'Medium',
      name: 'size'
    },
    {
      key: 'Large',
      text: 'Large',
      value: 'Large',
      name: 'size'      
    },
  ]

  return (
    <>
      <div className="header-item__title">
        {title}
        
      </div>
      <div className="header-item__buy">
      
        <div className="header-item__buy-price">
          {/* <p>Public price: ${price} </p> */}
          <div className="header-item__buy-price-actions">
         
          {discount && <div className="header-item__buy-price-actions"> <p>-{discount}% </p>
             <p>${(price - Math.floor(price * discount) / 100).toFixed(2)}</p></div>}

            {!discount && <p>${price}</p>}
          </div>
          <p className="subtitle">Size</p>
          <Form>
          <Form.Dropdown
          placeholder='Select size'
          fluid
          selection
          options={sizes}
  />
          <p>Quantity</p>
    
      <Form.Input placeholder='1' />
    
  </Form>
        </div>
        <div className="header-item__buy-btn-container">       
        <Button
          className="header-item__buy-btn-container__buy-btn"
          type="submit"
          onClick={() => addProductCart(url)}
        >
          Buy Now
        </Button>
        <div className="heart-container" >
        <Icon
          name={isFavorites ? "heart" : "heart outline"}
          className={classNames({ like: isFavorites })}
          link
          onClick={isFavorites ? deleteFavorite : addFavorite}
        />
        </div>
        </div>
      </div>
      <div
        className="header-item__summary"
        dangerouslySetInnerHTML={{ __html: summary }}
      />
      <div className="tabs" >

        <TabsItem />
      </div>
    </>
  );
}

Answer 1

This 就是您要找的。
对于功能组件，您需要导入 useState 钩子，并设置 2 个状态，如下所示：

const [size, setSize] = useState("small");
const [quantity, setQuantity] = useState(0);

然后按照上面 link 中的文档进行操作。你最终应该有类似的东西 <select value={size} onChange={(e) => changeSize(e)}>。在你的 changeSize 函数中，你应该使用 setSize 函数来设置状态。

如何在 useState 上设置输入和下拉列表的值？

How can i set the value of an input and dropdown on an useState?

forms

reactjs

react-hooks

use-state