每次我點擊單選按鈕時，它們都不會被藍色標記選中。我想知道我在這里做錯了什么。這是代碼：
import { useState } from "react";
const Form = () => {
const [clicked, setClick] = useState("v_likely");
const clickedRadio = () => {
setClick(clicked);
}
return (
<div className="form">
<div className="radio_button" style={{ fontSize: "12px" }}>
<label>Would you recommend to a friend?</label>
<div className="radio">
<div>
<input type="radio" name="v_likely" value={clicked} checked={clicked === "v_likely"} onClick={clickedRadio}></input>
<label>Very Likely</label>
</div>
<div>
<input type="radio" name="likely" value={clicked} checked={clicked === "likely"} onClick={clickedRadio}></input>
<label>Likely</label>
</div>
<div>
<input type="radio" name="think" value={clicked} checked={clicked === "think"} onClick={clickedRadio}></input>
<label>Will Think</label>
</div>
<div>
<input type="radio" name="no" value={clicked} checked={clicked === "no"} onClick={clickedRadio}></input>
<label>Not At All</label>
</div>
</div>
</div>
</div>
);
}
export default Form;
uj5u.com熱心網友回復：
您應該將event引數傳遞給clickedRadio函式并使用目標名稱來更新值：
const clickedRadio = (e) => {
setClick(e.target.name);
};
uj5u.com熱心網友回復：
您沒有更新 click 只是再次分配相同的值。為了能夠在下面運行是代碼片段。
import { useState } from "react";
const Form = () => {
const [clicked, setClick] = useState("v_likely");
const clickedRadio = (event) => {
setClick(event.target.name);
}
return (
<div className="form">
<div className="radio_button" style={{ fontSize: "12px" }}>
<label>Would you recommend to a friend?</label>
<div className="radio">
<div>
<input type="radio" name="v_likely" value={clicked} checked={clicked === "v_likely"} onClick={clickedRadio}></input>
<label>Very Likely</label>
</div>
<div>
<input type="radio" name="likely" value={clicked} checked={clicked === "likely"} onClick={clickedRadio}></input>
<label>Likely</label>
</div>
<div>
<input type="radio" name="think" value={clicked} checked={clicked === "think"} onClick={clickedRadio}></input>
<label>Will Think</label>
</div>
<div>
<input type="radio" name="no" value={clicked} checked={clicked === "no"} onClick={clickedRadio}></input>
<label>Not At All</label>
</div>
</div>
</div>
</div>
);
}
export default Form;
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/329678.html
標籤：反应