使用 React Hooks 单击时单选按钮样式会发生变化

Question

我希望单选按钮在单击时发生变化。这就是我现在的 image

我希望它在单击时更改为 this

这是我的代码：`

 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;
}

Answer 1

一个选项是自定义 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}`)
  ]
}

这是一个可验证的最小示例。 运行 它在下方并单击一些单选按钮以查看应用程序状态更改。

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>

使用 React Hooks 单击时单选按钮样式会发生变化

Radio button style changes when clicked with React Hooks

radio-button

reactjs

react-hooks