Question

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

如果用户以后更改单选按钮，我具有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)}
/>

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

Answer 1

您可以基于checked将input属性添加到state，

<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)}
/>

如何通过状态值更改选中（选中）的单选按钮

1 个答案: