Блог

У меня есть компонент переключателя, и я сопоставляю с ним данные API, чего я хочу, так это всякий раз, когда выбран параметр, на моем веб-сайте должны отображаться некоторые данные, скажем, какой-то текст описания. проблема в том, что данные не меняются при нажатии кнопки, они остаются неизменными для каждого выбранного параметра.

Это моя кнопка переключения, а тег 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"
          }
        ],
 

На картинке вы можете видеть, как добавляются переключатели и как отображается текст

Удалить onclick , поскольку вы можете обрабатывать setState с onChange самим собой, также используйте 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>