如何在 React 中显示内容？答案

【问题标题】：How to display content in React?如何在 React 中显示内容？
【发布时间】：2020-06-04 13:14:30
【问题描述】：

如何在 reactjs 中启用和禁用单选按钮。

我希望当我们点击单选按钮时它应该启用它的输入框。

假设当我在第一个单选按钮上进行选择时，首先它应该显示第一个输入框并在第一个输入框被填充时以类似的方式保持禁用其他输入框启用第二个输入框并类似地继续。

codesanbox 链接 - https://codesandbox.io/s/loving-gates-clqzc?file=/src/App.js

【问题讨论】：

标签： reactjs

【解决方案1】：

您可以设置复选框更改事件的状态。例如，您可以保存当前的复选框 id，然后您可以测试此 id 以设置禁用或启用输入disabled={isDisabled("formHorizontalRadios1")}：

const [currentCheckboxId, setCheckboxId] = useState("");

const setCheckbox = event => {
  setCheckboxId(event.target.id);
};

const isDisabled = id => currentCheckboxId !== id;

在 Playground 中查看完整示例：https://codesandbox.io/s/friendly-dubinsky-e1o8y?file=/src/App.js:1490-1535

【讨论】：

但是如果我选择第一个单选按钮我不想同时显示所有四个输入框。当第一个输入框被填充时启用第二个输入框并类似地继续。
我正在为第一个复选框更新我的游乐场，请参阅。这就是你需要的？
非常感谢@Denis Stukalov
嘿@Denis Stukalov 你能解释一下这行吗disabled={ isDisabled("formHorizontalRadios1") || !nameInfo.formGridName }
嘿，在这一行中，如果未选中行的复选框或未设置上一个字段（id为formGridName），我们将字段设置为禁用