0
votes

Problème de React js onclick

J'essaie de créer un bouton radio personnalisé comme une fonctionnalité. En mettant onClick sur div pour changer la valeur de l'état et je ne suis pas en mesure de changer la même chose. S'il vous plaît, aidez-moi à comprendre ce qui me manque.

export const TextRadioButton = styled.div`
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: rgba(176, 167, 230, 0.5);
  box-shadow: 0px 4px 4px rgba(176, 167, 230, 0.5);
  border-radius: 20px;
  margin-left: -10px;
  margin: 8px;
`;

Div stylisé pour le bouton radio personnalisé

  const [category, setCategory] = useState("");

  const handleSubmit = e => {
    console.log(e);
    setCategory(e.target.value);
  };

  return (
    <>
      <CenterAlignedColumnContainer>
        <FormHeadingText>
          <FormSectionHeadingTextContainer>
            Category
          </FormSectionHeadingTextContainer>
        </FormHeadingText>
        <CategoryContainer>
          <TextRadioButton
            value="Salads"
            onClick={handleSubmit}
            name="category"
          >
            <RadioButtonText>
              <TextContainer>Salads</TextContainer>
            </RadioButtonText>
          </TextRadioButton>
          <TextRadioButton value="Pasta" onClick={handleSubmit} name="category">
            <RadioButtonText>
              <TextContainer>Pasta</TextContainer>
            </RadioButtonText>
          </TextRadioButton>
        
        </CategoryContainer>
        <PartialWidthDivider />
      </CenterAlignedColumnContainer>
    </>
  );
}

reactjs styled-components

1 commentaires

codesandbox.io/s / pensive-water-pojf8? file = / src / StyledCompone‌ nts /… voici le lien sandbox pour référence

3 Réponses :

0
votes

div n'a pas de propriété value , vous devez donc le référencer comme un accessoire passé:

handleSubmit(value) {
    setCategory(value);
}

et l'utiliser explicitement

<TextRadioButton value='something' onClick={handleSubmit(props.value)} />

5 commentaires

Pour utiliser des accessoires, déclarez votre fonction comme ceci const TextRadioButton = (props) => {/ * votre implémentation * /}

oo de nombreux rendus. React limite le nombre de rendus pour éviter une boucle infinie.

J'ai changé l'implémentation des composants

Ok, désolé, donc soit vous pouvez passer la valeur de la radio manuellement à chaque fois onClick = {handleSubmit ('something')} soit la définir comme état dans votre composant radio et utiliser l'état au lieu des accessoires (dans onClick ).

J'accepte votre réponse mais pour référence future. @ lawrence-witt answer a mis en évidence les deux problèmes avec le code

0
votes

remplacez votre méthode onClick par:

onClick={
 (e)=>{
   console.log(e);
   setCategory(e.target.value);
};

onClick={(e)=>handleSubmit(e}

0 commentaires

0
votes

Il y a donc quelques problèmes avec ceci, le premier étant que vous avez un pseudo-élément couvrant l'intégralité de votre affichage:

const handleSubmit = e => {
  const value = e.currentTarget.value;
  setCategory(value);
};

Lorsqu'un élément est : avant cela signifie qu'il est au-dessus de tout autre élément dans le contexte d'empilement, de la même manière que les éléments codés en dur. Une solution simple est de donner le pseudo-élément z-index: -1 , qui garantira qu'il est placé derrière tout le reste. Dans l'idéal, cependant, vous n'utiliseriez pas du tout un pseudo-élément, mais plutôt un div distinct placé absolument derrière tout.

La seconde est que vos boutons n'utilisent pas un bon HTML sémantique, et par conséquent vous ne pourra pas cibler la valeur , qui n'existe pas sur les divs . De plus, comme le texte du bouton est séparé du bouton lui-même, il y aura des cas où il retournera de toute façon indéfini car la cible de l'événement ne contient pas la valeur du bouton.

Ce que je vous suggère de faire en premier est de changer TextRadioButton en un styled.button , vous devrez peut-être ajuster certains de vos styles pour s'adapter à cela. Ensuite, changez le gestionnaire d'événements comme suit:

export const Background = styled.div`
  width: 100%;
  &:before {
    display: block;
    position: absolute;
    width: 100%;
    height: 400vh;
    content: "";
    background: url(https://res.cloudinary.com/antilibrary/image/upload/v1595154947/Piatto/backgroundFormNew_sk7yie.svg)
      repeat center center;
    opacity: 0.5;
  }
`;

Le currentTarget d'un événement est l'élément dans lequel l'événement est enregistré, pas n'importe quel élément enfant l'a réellement déclenché, auquel vous accédez avec une cible régulière. De cette façon, quelle que soit la partie du bouton sur laquelle on clique, il référencera toujours la valeur au niveau supérieur du composant bouton.

1 commentaires

Merci beaucoup d'avoir passé du temps sur ce problème ... Je vais en savoir plus avant: propriété css.