单击单独的 div 会导致单选按钮更改答案

【问题标题】：Clicking Separate Div Causes Radio Button To Change单击单独的 div 会导致单选按钮更改
【发布时间】：2022-01-17 10:06:49
【问题描述】：

我遇到了一个问题，即单击单独 div 内的任意位置会导致单选按钮更改为第一个单选按钮。我不知道为什么会发生这种情况，因为用于添加付款的面板 div 与单选标签完全分开。

基本上，我在列表中有一堆卡片，单击单选按钮选择卡片。当我尝试填写字段以添加付款方式时，单击框中的任何内容都会导致单选按钮返回到第一张卡。 handleRadioChange 方法是如何传播到面板 div 的？

<div id="payment_methods" style={{margin: '10px'}}>
          <div className="group">
            
              {methods.map((method, key) => {

                return (
                  <label>
                    <span>
                      <input type="radio"
                      name={method.id}
                      value="saved-card-1"
                      style={{verticalAlign: 'middle', margin: '0px'}}
                      checked={radio == method.id}
                      onChange={handleRadioChange}
                      />
                    </span>
                  </label>    
                )      
              })}
              <label>
                <span>
                  <input type="radio"
                  name="add-card"
                  value="add-card"
                  style={{verticalAlign: 'middle', margin: '0px'}}
                  checked={radio == 'add-card'}
                  onChange={handleRadioChange}
                  /> 
                </span>
                  <div className="box-root hideIfEmpty">
                    <div className="box-root">
                      <div className="box-root flex flex-row flex-justify-flexstart flex-wrap">
                          <div className="flex flex-align-baseline flex-row">
                            <div className="flex align-baseline flex-row flex-justify-flexstart">
                              <span className="button-link-label text-proportional text-typeface text-wrap-nowrap text-gray">
                                <span> Add Payment Method </span>
                              </span>
                            </div>
                          </div>
                      </div>
                    </div>
                  </div>
              </label>
            </div>
           </div>


        <CSSTransition
          classNames="method"
          in={radio === 'add-card'}
          timeout={100}
          unmountOnExit>
            <div className="panel panel-primary">
        </CSSTransition>

这是我的 handleRadioChange 方法

    const handleRadioChange = async (e) => {
    console.log(e.target);

    setRadio(e.target.name)

    if (e.target.name == 'add-card') {
        console.log('Creating payment fields')
    }

}

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

您输入的事件正在传播到标签，该标签包含您卡片中的所有其他内容。尝试将 e.preventDefault() 添加到您的处理程序，或将非输入元素移到标签元素之外。您还为数组中的每种付款方式使用了唯一的名称属性。这将阻止他们充当单个广播组。

【讨论】：