Soy nuevo en reaccionar, quiero seleccionar todos los botones de radio dentro del bucle del mapa. Estoy configurando defaultChecked = {index}, pero solo selecciona el último botón de radio y lo mismo es cierto para la prop marcada. Amablemente ayúdame.

availableCars.map((item, index) => (
  <div className="item" key={index}>
    <div className="carbox">
      <div className="bluebg" />
      <div className="choosedesc">
        <h4>{item.vehicle_name}</h4>
      </div>
      <div>
        <div className="selecttrip">
          {!roundTrip || !oneWayTrip ? (
            <React.Fragment>
              {selectTripTypeError}
            </React.Fragment>
          ) : null}
          <label className="radiowrap">
            Round Trip{' '}
            <span className="blue">
              {item.rt_price}
              {item.currency == 'EUR'
                ? '€'
                : 'GBP'
                  ? '£'
                  : item.currency}
            </span>
            <input
              type="radio"
              value={item.rt_price}
              defaultChecked={index}
              onChange={e =>
                onRoundTripChecked(
                  item.rt_price,
                  item.vehicle_id,
                  item.currency,
                  item.seconds_before_pick,
                  item.max_pax,
                  item.release_hours,
                )
              }
              name="radio"
            />
            <span className="checkmark" />
          </label>

        </div>

      </div>
    </div>
  </div>
))
0
Rizwan Ashraf 22 ago. 2020 a las 12:24

1 respuesta

La mejor respuesta

Estoy configurando defaultChecked = {index}, pero solo selecciona el último botón de radio y lo mismo es cierto para la propiedad marcada.

Esto se debe a que todos pertenecen al mismo grupo de radio (que ha definido en su código como name="radio").

De MDN:

Un grupo de radio se define dando a cada uno de los botones de radio del grupo el mismo nombre. Una vez que se establece un grupo de radio, al seleccionar cualquier botón de radio de ese grupo se anula automáticamente la selección de cualquier botón de radio seleccionado actualmente en el mismo grupo.

Intente dar nombres únicos a sus botones de opción:

const App = () => {
  let sampleArray = ["foo","bar","joe"];
  
  return (
    <div>
      {sampleArray.map(function(value, index){
        return (
          <div>
            <input
              type="radio"
              defaultChecked={true}
              name={`radio-${index}`}
            />
            <label>{value}</label>
          </div>
        )
      })}
    </div>
  )
}

ReactDOM.render(<App/>, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

En una perspectiva de UX, la entrada de radio generalmente se usa para indicar una selección de un grupo de entrada. No puedo ver el diseño de su proyecto al momento de escribir este artículo, pero le sugiero que considere usar casillas de verificación.

Por último, recomiendo pasar valores booleanos a defaultChecked prop. Pasar el índice fallará al establecer el atributo checked en verdadero si pasa un falso.

1
95faf8e76605e973 22 ago. 2020 a las 10:13