使用ReactHooks單擊時，單選按鈕樣式會發生變化-有解無憂

我希望單選按鈕在單擊時更改。這就是我現在的影像

我希望它在單擊時更改為

這是我的代碼：`

 const [active, setIsActive] = useState(false)

<div className={`checkbox payment-radio-btn1 ${active ? "checkbox:hover" : "" }`}>
  <input type="radio" value="paystack" name='payment' onChange={handleChange}/>
  <label id='paystack'>Paystack (Debit/Credit Card)</label>
</div>
<div className={`checkbox payment-radio-btn2 ${active ? "checkbox:hover" : "" }`}>
  <input type="radio" value="wallet" name='payment' onChange={handleChange}/>
  <label id='wallet'>Pay with Wallet</label>
</div>

這是我的CSS代碼

.checkbox:hover{
border: 2px solid #00B6F0;
background: #FFFFFF;
}

.payment-radio-btn1{
position: absolute;
width: 406px;
height: 64px;
left: 10px;
top: 128px;
background: #F3F4F5;
box-shadow: 0px 24px 38px 3px rgba(0, 0, 0, 0.14);
border-radius: 4px;
margin-top: 20px;
margin-left: 6px;
display: flex;
}

uj5u.com熱心網友回復：

一個選項是自定義Radio元素，它允許您隨意表示您的單選按鈕。在這個例子中，我們使用了兩個表情符號，但如果你愿意，你可以使用影像或 SVG。

function Radio({ checked, onClick, children, on = "??", off = "??" }) {
  return <div className="radio" onClick={onClick}>
    {checked ? on : off } {children}
  </div>
}

我們可以Radio像這樣在我們的應用程式中使用元素。

function App() {
  const [radio, selectRadio] =
    useRadio(["paystack", "paypal", "wallet"], "paystack")
  return <div>
    <Radio checked={radio == "paystack"} onClick={selectRadio("paystack")}>
      Paystack (Debit/Credit Card)
    </Radio>
    {/* more radio options ...*/}
  </div>
}

這可以通過撰寫useRadio在自定義掛鉤中很好地編碼無線電組邏輯來實作。

function useRadio(validStates, initState) {
  const [state, setState] = React.useState(initState)
  return [
    state,
    value => event =>
      validStates.includes(value)
        ? setState(value)
        : console.error(`invalid option: ${value}`)
  ]
}

這是一個最小的、可驗證的示例。Run它在下面并單擊一些單選按鈕以查看應用程式狀態更改。

function App() {
  const [radio, selectRadio] = useRadio(["paystack", "paypal", "wallet"], "paystack")
  return <div>
    <Radio checked={radio == "paystack"} onClick={selectRadio("paystack")}>
      Paystack (Debit/Credit Card)
    </Radio>
    <Radio checked={radio == "wallet"} onClick={selectRadio("wallet")}>
      Pay with Wallet
    </Radio>
    <Radio checked={radio == "paypal"} onClick={selectRadio("paypal")}>
      PayPal
    </Radio>
    <pre>{JSON.stringify({paymentOption: radio}, null, 2)}</pre>
  </div>
}

function Radio({ checked, onClick, children, on = "??", off = "??" }) {
  return <div className="radio" onClick={onClick}>
    {checked ? on : off } {children}
  </div>
}

function useRadio(validStates, initState) {
  const [state, setState] = React.useState(initState)
  return [
    state,
    value => event =>
      validStates.includes(value)
        ? setState(value)
        : console.error(`invalid option: ${value}`)
  ]
}

ReactDOM.render(<App/>, document.querySelector("#app"))

.radio { cursor: pointer; }
pre { padding: 0.5rem; background-color: #ffc; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

uj5u.com熱心網友回復：

我認為您可能可以在這里找到所需的一切-> https://www.w3schools.com/howto/howto_css_custom_checkbox.asp

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/432989.html

標籤：反应反应钩子单选按钮钩查看

上一篇：提交資料時渲染一個框

下一篇：不完整的有效載荷|React和Redux工具包