React Js - 单击子单选按钮隐藏当前和父选择答案

【问题标题】：React Js - Clicking on child radio button hides the current and parent selectionReact Js - 单击子单选按钮隐藏当前和父选择
【发布时间】：2021-05-18 15:04:05
【问题描述】：

我正在尝试根据某些条件创建单选按钮。如果选中了父单选按钮，则显示子元素（这是一个子单选按钮）。条件很好。但是当我从子单选按钮中选择任何内容时，它会隐藏当前选择并取消选择父项。

我是新来的反应，有人可以帮我解决这个问题。这是我正在尝试的链接https://stackblitz.com/edit/reactjs-part6-form-with-inputs-checkbox-radio-button-dro-9nknlf?embed=1&file=Form.js。

在本例中，当我选择“用户 A”时，它会显示孩子“用户 A 孩子 1”。如果我点击 Child 1，它就会被隐藏。

提前致谢！

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

 <input
            disabled={disableuserA}
            type="radio"
            name="user"
            value="userA"
            **checked={selected === 'userA' || selected === 'test'}**
            onChange={handleChange}
          />
          userA

和

    <div aria-hidden={selected !== 'userA' && selected !== 'test' ? true : false}>

【讨论】：

感谢 Rohit 和 Binoy 的指点。它现在正在工作。非常感谢！

【解决方案2】：

问题出在这行代码

<div aria-hidden={selected !== 'userA' ? true : false}>

当您单击子单选按钮时，selected 的值变为test

但根据您的条件selected !== 'userA' ? true : false，如果selected 的值不等于userA，则告诉它隐藏复选框

解决此问题的更好方法是创建另一个 useState 来检查是否检查了父元素并根据它渲染子元素。

【讨论】：