我想在react中創建一個自定義的單選按鈕，所以我的組件是：
import React from "react" ;
export default function RadioBox（props） {
const [isChecked, setChecked] = React.useState(false) 。
const toggleCheck=（e）=> {
setChecked(e.target.checked| !isChecked) 。
};
return (
<>/span>
<label className="radio-container"/span>>
{props.text}
<input
type="radio"
checked={isChecked}。
onChange={(e) => toggleCheck(e)}。
id={props.id}
name={props.name}
/>
<span className="checkmark"/span>> </span>>
</label>
</>
);
}
顯然，在父組件（SimpleBox）中，我想使用它，稍后我將根據它來過濾產品：
。import React from "react" ;
import RadioBox from "./custom-components/RadioBox" ;
export default function SimpleBox（）{
return (
<div className="simple-box card"/span>>
< RadioBox text={"價格 低 至 高"}。name={"sorting"}。/>
< RadioBox text={"價格 高 至 低"}。name={"sorting"}。/>
< RadioBox text={"New to old"}。name={"sorting"}。/>
< RadioBox text={"Old to new"}。name={"sorting"}。/>
</div>/span>
);
}
但是，這些按鈕不能正常作業。有時我需要點擊幾次才能選擇，或者有時另一個單選按鈕被選中。你能不能看一下并幫助我找到原因呢？
謝謝...
uj5u.com熱心網友回復：
為什么你不簡單地使用inputs？
<form>
<p>請選擇您喜歡的聯絡方式：</p>
<div>
<輸入type="radio" id="contactChoice1"
name="contact" value="email">
<label for="contactChoice1">Email</label>
<輸入type="radio" id="contactChoice2"
name="聯系人" value="電話">
<label for="contactChoice2">phone</label>
<輸入type="radio" id="contactChoice3"
name="聯系人" value="郵件">
<label for="contactChoice3">Mail</label>
</div>
<div>
<button type="submit">提交</button>
</div>
</form>
uj5u.com熱心網友回復：
你給每個電臺起了相同的名字，你必須給每個電臺起一個不同的名字，請試一試
<div className="simple-box card"/span>>
< RadioBox text={"價格 低 至 高"}。name={"sorting"}。/>
< RadioBox text={"價格 高 至 低"}。name={"sorting"}。/>
< RadioBox text={"New to old"}。name={"sorting"}。/>
< RadioBox text={"Old to new"}。name={"sorting"}。/>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/322730.html
標籤：