React功能组件单选按钮窗体未呈现更新的选择

Question

由于某种原因，尽管它在其他地方似乎也能工作，但我正在尝试制作一个简单的单选按钮表单，它不会呈现更新后的选择。状态设置适当，但是UI不会显示更改。当我更新代码，浏览器更新应用程序时，出于某种原因，它会保持当前状态，并且实际上会显示所选的单选按钮。但是，如果我选择了另一个单选按钮，即使状态正在更改，UI仍然显示与以前相同的单选按钮。

我不知道这是否有什么不同，但这是我的反应版本"react": "17.0.2",。

我也在使用一个功能组件。

这是代码：

const [radioState2, setRadioState2] = useState(0);
const setRadioState2Handler = (event) => {
console.log("setRadioState2Handler()");
console.log("event");
console.log(event);
console.log("event.target.value");
console.log(event.target.value);
console.log(typeof event.target.value);
setRadioState2(parseInt(event.target.value));
};

<div>
<form>
<input type="radio" name="radioform2" value="1" checked={radioState2===1 } onChange={setRadioState2Handler} />{" "} radio <br />
<input type="radio" name="radioform2" value="2" checked={radioState2===2 } onChange={setRadioState2Handler} />{" "} radio <br />
<input type="radio" name="radioform2" value="3" checked={radioState2===3 } onChange={setRadioState2Handler} />{" "} radio <br />
</form>
</div>

提前感谢

Answer 1

感谢@AdamThomas的帮助。

事实证明，由于引导模式import { Modal } from "react-bootstrap";在</Dropdown.ItemText>内部被调用，出于某种原因，它干扰了模式的正确呈现。

解决方案是将修改后的<Dropdown>组件外的Modal取出到任意的div中

我为下拉列表创建了一个新按钮，它不是模态组件，而是一个简单的按钮，它调用一个将变量设置为true的函数。

然后，我将变量作为道具传递给Modal组件。我还将该状态变量的setter函数传递给Modal组件。

然后在模态组件中，我用useEffect"监听"变量的变化，如果该变量是true，我将调用handleShow。在我的handleHide函数中，我使用props中的setter函数将变量重置为false。

现在，下拉列表中的按钮激活了模态，单选按钮现在在模态中工作。

这显然是"react-bootstrap"库的一些问题。

我还必须从Modal组件中删除按钮的实际div，并且只在渲染函数中保留<Modal>元素。

我希望这能帮助到别人！