反應功能組件單選按鈕表單未呈現更新的選擇

Question

出於某種原因，即使它似乎在其他地方工作，我正在嘗試做一個簡單的單選按鈕表單，它不會呈現更新的選擇。 state 已正確設置，但 UI 未顯示更改。 當我更新代碼並且瀏覽器更新應用程序時，由於某種原因，它會保留當前的 state，並且它確實顯示了選中的單選按鈕。 但是，如果我 select 另一個單選按鈕，即使 state 正在更改，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 幫助解決這個問題。

事實證明，因為 Bootstrap Modal import { Modal } from "react-bootstrap"; 在</Dropdown.ItemText>內部調用，由於某種原因，它會干擾模態的正確呈現。

解決方案是將修改后的<Dropdown>組件之外的 Modal 取出到任意 div 中。

我為下拉菜單創建了一個新按鈕，它不是模態組件，而是一個簡單的按鈕，調用 function 將變量設置為 true。

然后，我將變量作為道具傳遞給 Modal 組件。 我還將該 state 變量的設置器 function 傳遞給 Modal 組件。

然后在模態組件中，我使用 useEffect 來“監聽”變量的變化，如果該變量為true ，我將調用handleShow 。 在我的handleHide function 中，我使用道具中的設置器 function 將變量重置為false 。

現在，下拉菜單中的按鈕激活模態，單選按鈕現在在模態中工作。

這顯然是"react-bootstrap"庫的一些問題。

我還必須從 Modal 組件中刪除按鈕的實際div ，只在渲染 function 中留下<Modal>元素。

我希望這可以幫助別人！