React Bootstrap 只允许一个复选框勾选答案

【问题标题】：React Bootstrap Only Allow One Checkbox TickReact Bootstrap 只允许一个复选框勾选
【发布时间】：2020-09-09 00:50:06
【问题描述】：

我在表格的功能组件中使用 React 引导程序。在此表中，我有一个条目，其中有两个复选框，我想只勾选其中一个。当我选择一个时，我想更改另一个表条目。这是我的代码：

    <td>
                          <Form>
                            {["checkbox"].map(type => (
                              <div
                                key={`custom-inline-${type}`}
                                className="mb-3"
                              >
                                <Form.Check
                                  custom
                                  inline
                                  label="Exponential"
                                  type={type}
                                  id={`custom-inline-${type}-1`}
                                />
                                <Form.Check
                                  custom
                                  inline
                                  label="Polynomial"
                                  type={type}
                                  id={`custom-inline-${type}-2`}
                                />{" "}
                              </div>
                            ))}
                          </Form>
    </td>

我在一个单独的条目中有两个选项，它们会根据用户选择“多项式”还是“指数”而改变 - 要么

<td> Ax^2 + Bx + c </td>

或

<td> Ax^n </td>

我该怎么做？如果可能的话，我想避免单选按钮和那些依赖项。

编辑：我已经设法从 Bootstrap 添加了一些单选按钮，但我不确定如何返回 <td> 中的函数。

  const [exp, setExp] = useState(true);
  const [poly, setPoly] = useState(false);

  function onExpChange() {
    console.log("exp triggered");
    setExp(true);
    setPoly(false);
  }

  function onPolyChange() {
    console.log("poly triggered");
    setPoly(true);
    setExp(false);
  }

在表格中：

                          <Form>
                            <ToggleButtonGroup
                              type="radio"
                              name="distribution"
                              defaultValue={"exponential"}
                            >
                              <ToggleButton
                                value={"exponential"}
                                onChange={onExpChange}
                              >
                                Exponential
                              </ToggleButton>
                              <ToggleButton
                                value={"polynomial"}
                                onChange={onPolyChange}
                              >
                                Polynomial
                              </ToggleButton>
                            </ToggleButtonGroup>
                          </Form>

【问题讨论】：

Form.Check 是否没有一个名为 checked 的道具，您必须手动通过 tot eh Check 让它知道它是否存在，这基于 onChange 或 onChecked 不能介意它被什么击中了？

标签： reactjs react-bootstrap react-forms

【解决方案1】：

排序....


  const [exp, setExp] = useState(true);
  const [poly, setPoly] = useState(false);

  function onExpChange() {
    console.log("exp triggered");
    setExp(true);
    setPoly(false);
  }

  function onPolyChange() {
    console.log("poly triggered");
    setPoly(true);
    setExp(false);
  }

  function expectedGoals() {
    if (exp === true) {
      return "Expected Goals = A3x^3 + A2x^2 + A1x + A0";
    } else {
      return "something else";
    }
  }

以及表格条目：

<td>
<Form>
  <ToggleButtonGroup
    type="radio"
    name="distribution"
    defaultValue={"exponential"}
  >
    <ToggleButton
      value={"exponential"}
      onChange={onExpChange}
    >
      Exponential
    </ToggleButton>
    <ToggleButton
      value={"polynomial"}
      onChange={onPolyChange}
    >
      Polynomial
    </ToggleButton>
  </ToggleButtonGroup>
</Form>
</td>

<td>{expectedGoals()}</td>

感谢今天。

【讨论】：