Les props sont indéfinis dans React

Question

Je suis nouveau dans js et reactjs . J'essaie de créer un ButtonGroup avec peu Buttons à l'intérieur, dans l'espoir que lorsque je clique sur un élément particulier Button (en ButtonGroup ), seul ce bouton particulier sera mis en évidence (changement de couleur) et le reste sera de couleur normale. Ci-dessous, vous trouverez le code qui réalise le comportement ci-dessus mais en setColour Je reçois une erreur _this.state.selected.props is undefined . Quelqu'un pourrait-il m'indiquer où je me trompe ? De même, si quelqu'un peut me dire si c'est la bonne façon d'aborder ce problème.

import React from "react"
import {
    ButtonGroup,
    Button
} from "reactstrap"

class MainButtonsGroup extends React.Component {
constructor (props) {
    super(props)
    this.state = {
        selected: null
    }
}

handleSelection = (e) => {
    this.setState({selected: e.target})
}

setColour = (key) => {
    if (this.state.selected)
    {
        // ERROR : _this.state.selected.props is undefined
        return (this.state.selected.props.key === key) ? 'primary' : 'secondary'
    }
}

render() {
    return (
        <ButtonGroup>
            <Button key={1} onClick={this.handleSelection} color={this.setColour(1)}>MainButtonA</Button>
            <Button key={2} onClick={this.handleSelection} color={this.setColour(2)}>MainButtonB</Button>
            <Button key={3} onClick={this.handleSelection} color={this.setColour(3)}>MainButtonC</Button>
        </ButtonGroup>
    )
}
}

export default MainButtonsGroup;

Answer 1

Vous ne devez pas conserver la référence e.target et vous devez recevoir un avertissement React dans votre console à ce sujet ? Vous venez de créer une fuite de mémoire dans votre application.

Au lieu de cela, copiez ce dont vous avez besoin à partir de la cible et laissez la référence être collectée. Bien que dans votre cas, il n'est pas nécessaire d'attacher des données au noeud DOM :

<Button onClick={() => this.handleSelection(this.setColour(3))}>MainButtonC</Button>

Notez que vous n'avez pas besoin key={3} à moins que vous ne mettiez en correspondance les éléments dans une boucle.

handleSelection = (color) => {
    this.setState({ selected: color })
}

Cependant, ce code est un peu étrange, il suffit d'enregistrer l'index du bouton cliqué et de lui donner une classe pour le styliser, par exemple.

class MainButtonsGroup extends React.Component {
  state = {
    selectedIndex: null,
  }

  handleSelection = (index) => {
    this.setState({selectedIndex: index})
  }

  render() {
    const idx = this.state.selectedIndex;

    return (
      <ButtonGroup>
        <Button className={idx === 1 ? 'primary' : 'secondary'} onClick={() => this.handleSelection(1)}>MainButtonA</Button>
        <Button className={idx === 2 ? 'primary' : 'secondary'} onClick={() => this.handleSelection(2)}>MainButtonB</Button>
        <Button className={idx === 3 ? 'primary' : 'secondary'} onClick={() => this.handleSelection(3)}>MainButtonC</Button>
      </ButtonGroup>
    );
  }
}

Answer 2

Vous ne pouvez pas obtenir les props d'un composant à partir d'un nœud DOM. Vous pourriez plutôt conserver les noms de vos boutons dans un tableau dans votre état de composant et l'utiliser pour rendre vos boutons dans la méthode de rendu.

Vous pouvez ensuite transmettre le nom du bouton à la fonction handleSelection et utilisez-le comme votre selected valeur. Si votre bouton est le bouton sélectionné, il peut recevoir la valeur primary sinon la couleur secondary un.

Exemple

import React from "react";
import ReactDOM from "react-dom";
import { ButtonGroup, Button } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

class MainButtonsGroup extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      buttons: ["A", "B", "C"],
      selected: null
    };
  }

  handleSelection = button => {
    this.setState({ selected: button });
  };

  render() {
    const { buttons, selected } = this.state;

    return (
      <ButtonGroup>
        {buttons.map(button => (
          <Button
            key={button}
            onClick={() => this.handleSelection(button)}
            color={selected === button ? "primary" : "secondary"}
          >
            MainButton{button}
          </Button>
        ))}
      </ButtonGroup>
    );
  }
}