在反应中管理循环单选按钮的状态

Posted 2023-02-14

【中文标题】在反应中管理循环单选按钮的状态

【英文标题】：managing the state of looped radio buttons in react

【发布时间】：2019-12-07 22:02:22

【问题描述】：

所以我有一个 API。我必须深入研究它，所以我首先映射所有响应数据，然后在其中做另一个映射以获取一个对象（测验答案）。所有这一切都很好。但是，当您单击其中一个单选框时，它不会从是/否切换，而是会被单击并保持单击状态。现在我知道如何正常处理这个问题，使用 onChange 并将项目的状态设置为 true 或 false，但在这种情况下，项目是通过循环映射生成的。

当它们是循环项目时，我如何更改它们的状态？

代码：

        this.quizData = this.state.quiz_data.map((item, id) => 
            return (
                <div key=id>
                    <h3 className='quiz-question'>item.Title</h3>
                    <p>item.Question</p>

                    <div className='quiz-answer-wrapper'>
                        <div className='quiz-answer-option'>
                                this.quizAnswers = item.PreQualifyingAnswerDefinitions.map((item, id) => 
                                    return (
                                        <fieldset className='quiz-radio-label' key=id>
                                            <input type='radio' value='value' onChange=() => value('') />
                                                item.Answer
                                            </fieldset>
                                    )
                                )
                        </div>
                    </div>
                </div>
            )
        )

【问题讨论】：

嘿，这有帮助吗***.com/questions/30401854/…

我仍然需要解决以下问题：如果您有 4 个单选按钮，单击时所有 4 个都将保持为真，它们不会在真/假之间切换。

在我的回答中，我假设您只希望一个单选按钮保持活动状态，而其他单选按钮处于非活动状态。这是正确的吗？

正确。但我循环通过一个 api，假设它返回 10 组是/否答案。我需要创建相同数量的单选按钮，并将这两个绑定在一起，所以每个是/否对都有一个与之关联的单选按钮。

【参考方案1】：

您可以使用事件处理程序参数。不要用() => value('') 覆盖onChange，而是传递e => value(e)。除此之外，给每个无线电输入一个name，这个name 与事件处理程序一起传递。

顺便说一句，我会为您的value 函数使用不同的名称，可能类似于handleAnswerRadio。

这个documentation 可能有助于澄清一些事情。

这里有一些代码向您展示映射无线电输入的工作。

class App extends React.Component 
  constructor(props) 
    super(props);

    this.state = 
      radioInputs: [
         name: 'radio_1', checked: false ,
         name: 'radio_2', checked: false ,
         name: 'radio_3', checked: false ,
         name: 'radio_4', checked: false ,
         name: 'radio_5', checked: false 
      ]
    
  
  
  handleAnswerRadio = (e) => 
    let newRadios = JSON.parse(JSON.stringify(this.state.radioInputs))
    
    newRadios.map(item => 
      item.checked = item.name === e.target.name
      return item
    )
    
    this.setState(
      radioInputs: newRadios
    )
  

  render() 
    return (
      <div>
        this.state.radioInputs.map((item, index) => (
          <div>
            item.name
            <input key=item.name name=item.name type="radio"
                   checked=item.checked
                   onChange=e => this.handleAnswerRadio(e)/>
          </div>
        ))
      </div>
    )
  


ReactDOM.render((<App/>), document.getElementById('testing'));

<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="testing"></div>

【讨论】：

所以我需要遍历我的 api 数据，其中包含每个单选按钮的答案，并将它们添加到 radioInputs 状态数组中，对吗？

是的，只要您对每个答案都有一个唯一的名称/ID，这应该可以。我还将使每个答案成为一个对象，以便您可以存储一个“已检查”布尔值，正如您在我的示例中看到的那样。