提交時如何以 React 表單中的 UseState 將值存儲為數組？

Question

我正在嘗試在 React 中創建一個表單，我可以將類別存儲在一個數組中，但是每當用戶鍵入某些內容時，它的行為就會有所不同。

我將產品對象傳遞到類別為數組的后端。 當用戶提交所有 forms 而不影響 UX 時，我應該如何將這個值存儲在數組中？ 我可以將此邏輯移動到submitHandler function 嗎？

這是我嘗試過的。

  const [categories, setCategories] = useState([])
  const [price, setPrice] = useState(0)

  const submitHandler = (e) => {
    e.preventDefault();
    dispatch(createProduct({
      title,
      desc,
      img,
      categories,
      size,
      price,
      countInStock
    }))
  };

<Form onSubmit={submitHandler}>
          <Form.Group controlId="categories">
            <Form.Label>Categories</Form.Label>
            <Form.Control
              type="categories"
              placeholder="Enter categories"
              value={categories}
              onChange={(e) => setCategories(category => [...category, e.target.value])}
            ></Form.Control>
          </Form.Group>
    
          <Container className="">
            <Row>
              <Col>
                <Button type="submit" variant="primary" className="my-2">
                  Create
                </Button>
              </Col>
            </Row>
          </Container>
        </Form>
      )}
      </FormContainer>

Answer 1

我認為目前您使用setCategory的方式會創建一個包含先前值和當前值的列表作為字符串。

要將當前輸入值（ e.target.value ）作為數組獲取，您可以執行e.target.value.split(",") ，這將給出數組['M','Ma','M','Man'] ，然后你可以像使用category一樣傳播它。

這將導致onChange看起來像這樣：

onChange={e => setCategories(category => [...category, ...e.target.value.split(",")}