3
votes

Comment définir un paramètre par défaut vérifié sur la première entrée uniquement dans le bouton radio lors de l'utilisation de la fonction de carte dans reactjs

J'essaie d'utiliser defaultChecked dans reactjs lorsque j'utilise la fonction de carte sur un seul bouton radio. Mais comment puis-je y parvenir?

{colors.map((color, index) => {
      return (
        <label className="color-checkmark" key={index}>
          <input
            type="radio"
            checked="checked"
            name="color"
            value={color}
            // defaultChecked
          />
        </label>
      );
    })}

Si j'utilise defaultChecked, il sera défini sur chaque bouton radio.

javascript reactjs

2 commentaires

quel élément voulez-vous cocher par défaut?

Premier élément à vérifier par défaut.

3 Réponses :

2
votes

Vous devez ajouter une condition à votre defaultChecked et supprimer la propriété checked :

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

const colors = ['blue', 'green', 'red']

function App() {
  return colors.map((color, index) => (
    <label key={index}>
      <input
        type="radio"
        name="color"
        value={color}
        defaultChecked={index === 0}
      />
      <span style={{color}}>{color}</span>
    </label>
  ))
}

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

3 commentaires

Je veux juste que mon premier bouton radio soit coché par défaut sans aucun critère.

J'ai alors mis à jour ma réponse. Vous devez définir defaultChecked uniquement si index === 0. N'oubliez pas de supprimer la propriété cochée que vous avez mise dans votre exemple.

C'est le cas pour moi, voyez l'exemple. Cela signifie que vous avez oublié quelque chose, vérifiez à nouveau.

2
votes

Si vous voulez que le premier élément soit vérifié

{colors.map((color, index) => {
  return (
    <label className="color-checkmark" key={index}>
      <input
        type="radio"
        name="color"
        value={color}
        defaultChecked={!(!!index)}
      />
    </label>
  );
})}

que fait !! ?

le !! code > garantit que la valeur sera toujours une valeur booléenne ou convertie en une valeur booléenne.

5 commentaires

Cela n'a pas fonctionné. Il a juste vérifié chaque bouton radio.

en utilisant l'index?

oui en utilisant l'index, il suffit de définir chaque bouton radio comme coché dans HTML DOM.

voir le code ci-dessus et supprimer vérifié = "vérifié" de l'entrée.

vous n'avez pas vraiment besoin de faire ! (!! index) dans ce cas, puisque c'est un index nul, vous pouvez faire ! index et il sera évalué à vrai.

3
votes

Vous devez supprimer l'attribut checked = "checked" car il entre en conflit avec l'attribut defaultChecked . Et puis ajoutez defaultChecked = {index === 0}

0 commentaires