Question

所以我有一个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>
            )
        })

Answer 1

您可以使用事件处理程序参数。与其传递onChange而不是用() => value('')覆盖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>

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

1 个答案: