如何在单击单选按钮时对 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>
      );
    };