0

我在表的功能组件中使用 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>
4

1 回答 1

0

排序……


  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>

感谢今天。

于 2020-05-23T04:53:29.187 回答