与引导程序和单选按钮反应 [英] React with bootstrap and Radio buttons

问题描述

我正在尝试在 React 中使用单选按钮(我一直使用)，但这次使用 react-bootstrap.我有两个单选按钮，我只想选中一个按钮并获取该值.

I'm trying to use radio buttons in React (that I always used) but this time with react-bootstrap. I have two radio buttons and I want just one to be checked and get that value.

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

Codesandbox link: https://codesandbox.io/s/react-bootstrap-radio-button-1d443

知道如何获得价值吗?

推荐答案

给 Form.Check 一个 value 属性，然后使用 获取值e.target.value 一旦你像这样点击无线电 btn.使用 e.persist(); 避免出现以下错误:

Give a value attribute to the Form.Checks and then get the value using e.target.value once you click the radio btn like this. Use e.persist(); to avoid getting the following error:

出于性能原因重用此合成事件.如果你是看到这一点，您正在访问方法 currentTarget释放/无效的合成事件

This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the method currentTarget on a released/nullified synthetic event

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>
  );
};

演示

这篇关于与引导程序和单选按钮反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！