如何在 React js 中单击单选按钮时显示与 api 不同的值？

Question

I have a radio button component and iam mapping api data to it what i want is whenever an option is selected my website should display some data let say some kind of description text the problem is the data does单击按钮时不会更改它对每个选定的选项都保持不变。

这是我的单选按钮，下面的 p 标签是要显示文本的地方

<input
type="radio"
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={() => {
      this.props.giftDetails.variations.map(
      (e) => this.setState({ giftDescription: e.reward_description })
            )
         }}
                            
 />
<p dangerouslySetInnerHTML={{ __html: giftDescription}}/>

我的api回复是

"variations": [
          {
            "variation_id": 1,
            "variation_name": "210kr",
            "price": "210",
            "reward_text": "200kr. Price",
            "reward_description": "Med et gavekort til Sendentanke.dk kan du vælge mellem gavekort til hundredevis af butikker og oplevelser ét sted."
          },
          {
            "variation_id": 2,
            "variation_name": "400kro",
            "price": "400",
            "reward_text": "400 Price",
            "reward_description": "Earn a reward"
          }
        ],

You can see in the picture how radio buttons are added and how text is displayed

Answer 1

删除 onclick 因为您可以使用 onChange 本身处理 setState 也使用 checked 单选按钮属性并通过如下迭代生成单选按钮。

const Options = this.props.giftDetails.variations.map((v) => {
      return (
        <React.Fragment key={v.variation_id}>
          <input
            type="radio"
            value={v.variation_id}
            checked={v.variation_id == this.state.giftCard}
            onChange={(e) => {
              this.setState({
                giftCard: e.target.value,
                giftDescription: v.reward_description,
              });
            }}
          />
          {v.reward_text}
        </React.Fragment>
      );
    });

    return (
      <React.Fragment>
        {Options}
        <p>{this.state. giftDescription}</p>
      </React.Fragment>
    );

class Hello extends React.Component {
  constructor() {
    super();
    this.state = { giftCard: null, giftDescription: null };
  }

  render() {
    console.log("this.state", this.state);
    const variants = {
      variations: [
        {
          variation_id: 1,
          variation_name: "210kr",
          price: "210",
          reward_text: "200kr. Price",
          reward_description:
            "Med et gavekort til Sendentanke.dk kan du vælge mellem gavekort til hundredevis af butikker og oplevelser ét sted.",
        },
        {
          variation_id: 2,
          variation_name: "400kro",
          price: "400",
          reward_text: "400 Price",
          reward_description: "Earn a reward",
        },
      ],
    };

    const Options = variants.variations.map((v) => {
      return (
        <React.Fragment>
          <input
            key={v.variation_id}
            type="radio"
            value={v.variation_id}
            checked={v.variation_id == this.state.giftCard}
            onChange={(e) => {
              this.setState({
                giftCard: e.target.value,
                giftDescription: v.reward_description,
              });
            }}
          />
          {v.reward_text}
        </React.Fragment>
      );
    });

    return (
      <React.Fragment>
        {Options}
        <p>{this.state.giftDescription}</p>
      </React.Fragment>
    );
  }
}

ReactDOM.render(<Hello name="World" />, document.getElementById("container"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

如何在 React js 中单击单选按钮时显示与 api 不同的值？

How to display different value from the api on radio button click in react js.?

javascript

api

radio-button

buttonclick

reactjs