使用引導程序和單選按鈕做出反應

Question

我正在嘗試在 React 中使用單選按鈕（我一直使用），但這次使用react-bootstrap 。 我有兩個單選按鈕，我只想檢查一個並獲得該值。

import React, { useState } from "react";
import { Form, Button } from "react-bootstrap";

const StandAdd = () => {
  const [item, setItem] = useState({
    kindOfStand: ""
  });

  const { kindOfStand } = item;

  const handleInputChange = event => {
    event.preventDefault();
    setItem({ ...item, [event.target.name]: event.target.value });
  };

  const handleSubmit = event => {
    event.preventDefault();
    alert(`${kindOfStand}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <Form.Group controlId="kindOfStand">
        <Form.Check
          type="radio"
          aria-label="radio 1"
          label="Design"
          onChange={handleInputChange}
          checked={kindOfStand === "design"}
          // value="design" // <-- once enabled I can't select it
        />
        <Form.Check
          type="radio"
          aria-label="radio 2"
          label="Food"
          onChange={handleInputChange}
          checked={kindOfStand === "food"}
          // value="food" // <-- once enabled I can't select it
        />
      </Form.Group>
      <Button variant="primary" type="submit">
        Submit
      </Button>
    </form>
  );
};

export default StandAdd;

Codesandbox 鏈接： https://codesandbox.io/s/react-bootstrap-radio-button-1d443

關於如何獲得價值的任何想法？

Answer 1

給Form.Check一個value屬性，然后像這樣單擊無線電 btn 后使用e.target.value獲取值。 使用e.persist(); 以避免出現以下錯誤：

出於性能原因，此合成事件被重用。 如果您看到此內容，則表示您正在訪問已發布/無效合成事件的 currentTarget 方法

const StandAdd = () => {
  const [item, setItem] = useState({ kindOfStand: "", another: "another" });

  const { kindOfStand } = item;

  const handleChange = e => {
    e.persist();
    console.log(e.target.value);

    setItem(prevState => ({
      ...prevState,
      kindOfStand: e.target.value
    }));
  };

  const handleSubmit = e => {
    e.preventDefault();
    alert(`${kindOfStand}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <Form.Group controlId="kindOfStand">
        <Form.Check
          value="design"
          type="radio"
          aria-label="radio 1"
          label="Design"
          onChange={handleChange}
          checked={kindOfStand === "design"}
        />
        <Form.Check
          value="food"
          type="radio"
          aria-label="radio 2"
          label="Food"
          onChange={handleChange}
          checked={kindOfStand === "food"}
        />
      </Form.Group>
      <Button variant="primary" type="submit">
        Submit
      </Button>
    </form>
  );
};

演示