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

Question

I'm having a problem where clicking anywhere inside a separate div is causing the radio button to change to the first radio button. I don't know why this is happening as the panel div for adding payments is completely separated from the radio label.

Basically, I have a bunch of cards in a list, clicking the radio button selects the cards. When I try to fill out the fields to add a payment method, clicking anything within the box causes the radio button to go back to the first card. How is the handleRadioChange method propagating to the panel 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>

This is my handleRadioChange method

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

    setRadio(e.target.name)

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

}

Answer 1

The event on your input is propagating to the label, which contains everything else inside your card. Try adding e.preventDefault() to your handler, or moving non-input elements outside of your label element. You're also using a unique name attribute for each payment method in your array. That would prevent them from acting as a single radio group.