如何按状态值更改选中（选定）单选按钮[重复]

Posted 2023-02-22

【中文标题】如何按状态值更改选中（选定）单选按钮[重复]

【英文标题】：How to change checked (selected) radio button by state value [duplicate]

【发布时间】：2019-12-11 20:11:33

【问题描述】：

我的反应状态由 API 对象设置。我有 2 个单选按钮，我想根据状态值更改 checked 单选按钮。

如果用户稍后更改单选按钮，我有 onChange 函数来处理设置状态。

this.state = 
    refundableStatus: 'Refundable',



handleRefundableStatus = (e) => 
    this.setState(
        refundableStatus: e.target.value
    )



<input
    type="radio"
    label="Refundable"
    name="refundable-status"
    id="refundableCheck"
    value="Refundable"
    onChange=(e) => this.handleServiceFeeTypeFrom(e)
/>

    <input
        type="radio"
        label="Non-Refundable"
        name="refundable-status"
        id="nonRefundableCheck"
        value="Non-Refundable"
        onChange=(e) => this.handleServiceFeeTypeFrom(e)
/>

我想将选中的单选按钮更改为“可退款”。我该怎么做？

【参考方案1】：

您可以在state的基础上为input添加checked属性，

<input
    type="radio"
    label="Refundable"
    name="refundable-status"
    id="refundableCheck"
    value="Refundable"
    checked=this.state.refundableStatus === "Refundable"
    onChange=(e) => this.handleServiceFeeTypeFrom(e)
/>

<input
   type="radio"
   label="Non-Refundable"
   name="refundable-status"
   id="nonRefundableCheck"
   value="Non-Refundable"
   checked=this.state.refundableStatus !== "Refundable"
   onChange=(e) => this.handleServiceFeeTypeFrom(e)
/>