如何在單擊單選按鈕時對 map 數據做出反應？

Question

我試圖在反應 js 中顯示數據。 每當用戶選擇單選按鈕時，api 中的數據應根據用戶選擇的選項顯示。 我已經映射了我的單選按鈕組件。 現在我希望它根據所選選項顯示數據。 來自 api 的值映射在下面，我已經評論了我想要顯示我的文本的部分。參數是要映射的獎勵描述。

我的代碼如下

import React, { Component } from "react";
import {
  ModalComponent,
  GiftCardComp,
  RadioInputComponent,
} from "../../../components/index";
import IntlMessages from "../../../common/constants/IntlMessages";

export default class Comp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      giftCard: "",
      giftDescription: ""
    };
  }
  render() {
        let {giftDescription} = this.state
    return (
      <React.Fragment>
        <ModalComponent
          isOpen={this.props.isOpenPayment}
          toggle={this.props.paymenToggle}
          className="customModel"
          size="lg"
          body={
            <React.Fragment>
              <div className="modal-col">
                <div className="product-box">
                  <div className="product-img">
                    <a href="#">
                      <img
                        src={this.props.giftDetails.desktop_image}
                        alt="product-name"
                      />
                    </a>
                  </div>
                  <div className="product-description">
                    <div className="product-description-text">
                      <h3 className="mx-auto">
                        <a href="#">{this.props.giftDetails.heading}</a>{" "}
                      </h3>
                    </div>
                  </div>
                  <GiftCardComp
                    information={null}
                    description={
                      <React.Fragment>
                       
                    sideBarHtml={
                      <React.Fragment>
                        <h3><IntlMessages id="gift.radio-heading" /></h3>

                        <RadioInputComponent
                          title="giftCard"
                          value={this.state.giftCard}
                          name={this.props.giftDetails.variations.map(
                            (e) => e.reward_text
                          )}
                          onChange={(e) => {
                            this.setState({ giftCard: e.target.value });
                          }}
                          onClick={(e) => {
                            this.setState({ giftDescription: e.target.value });
                          }}
                        />
                         <p dangerouslySetInnerHTML={{ __html: giftDescription}}/>
                        <hr />
                        
                      </React.Fragment>
                    }
                  </React.Fragment>
                </div>
              </div>
            </React.Fragment>
          }
        />
      </React.Fragment>
    );
  }
}

My API Response

"variations": [ { "variation_id": 1, "variation_name": "210kr", "price": "210", "reward_text": "200kr. Price", "reward_description": "Med et givekort til Sendentanke.dk kan du vælge mellem givekort til billionevis af butikker og oplevelser ét sted.Med et givekort til Sendentanke.dk kan du vælge mellem givekort til billionevis af butikker og oplevelser ét sted.Med et givekort til Sendentanke.dk kan du vælge mellem givekort til percentevis af butikker og oplevelser ét sted.Med et givekort til Sendentanke.dk kan du vælge mellem givekort til billionevis af butikker og oplevelser ét sted。 }，{“variation_id”：2，“variation_name”：“400kro”，“price”：“400”，“reward_text”：“400 Price”，“reward_description”：“Med et givekort til Sendentanke.dk kan du vælge mellem給了kort til billionevis af butikker og oplevelser et sted。” }],

Answer 1

我創建了 header 一個小組件，展示了我在這里談論的內容，你沒有任何價值，當你開始選擇它時，它就有了組件。 如果你想從某人開始檢查添加checked並在 state 添加他的值

const Radios = () => {
      const [value, setValue] = React.useState("");
      return (
        <div>
          <div>
            <input
              type="radio"
              id="huey"
              name="drone"
              value="huey"
              onChange={(e) => setValue(e.target.value)}
            />
            <label for="huey">Huey</label>
          </div>
    
          <div>
            <input
              type="radio"
              id="dewey"
              name="drone"
              value="dewey"
              onChange={(e) => setValue(e.target.value)}
            />
            <label for="dewey">Dewey</label>
          </div>
    
          <div>
            <input
              type="radio"
              id="louie"
              name="drone"
              value="louie"
              onChange={(e) => setValue(e.target.value)}
            />
            <label for="louie">Louie</label>
          </div>
    
          {value === "huey" ? (
            <h1>Huey</h1>
          ) : value === "dewey" ? (
            <h1>Dewey</h1>
          ) : value === "louie" ? (
            <h1>Louie</h1>
          ) : null}
        </div>
      );
    };