如何在单击单选按钮时映射数据？

Question

我正在尝试在 React js 中显示数据。每当用户选择单选按钮时，api 中的数据都应根据用户选择的选项显示。我已经映射了我的单选按钮组件。现在我希望它根据所选选项显示数据。来自 api 的值映射如下，我在要显示我的 text.the 参数的部分评论了要映射的 reward_description。

我的代码如下

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

“变化”：[ { "variation_id": 1, "variation_name": "丹麦克朗 210", "价格": "210", "reward_text": "200 丹麦克朗价格", "reward_description": "使用 Sendentanke.dk 的礼品卡，您可以在数百家商店的礼品卡之间进行选择，并体验一个 sted.Med Sendentanke.dk 的礼品卡，您可以在其中进行选择数百家商店和体验的礼品卡 sted.Med Sendentanke.dk 的礼品卡您可以在数百家商店和体验的礼品卡之间进行选择 sted.Med Sendentanke.dk 的礼品卡您可以在一个地方选择数百家商店和体验的礼品卡。” }, { "variation_id": 2, "variation_name": "400克罗", “价格”：“400”， "reward_text": "400 价格", "reward_description": "使用 Sendentanke.dk 的礼品卡，您可以在一个地方选择数百家商店和体验的礼品卡。" } ],

Answer 1

我创建了 header 一个小组件来展示我在这里谈论的内容，你没有任何价值，当你开始选择它时，它就有了组件。如果你想从某人开始检查添加 checked 并在状态中添加他的值

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

如何在单击单选按钮时映射数据？

How to map data in react on Radio button click?

javascript

api

mapping

radio-button

reactjs