Matériel Ui sélecteur terrain

Question

Je veux créer quelque chose comme ça

Je peux choisir entre les champs, comment est-il possible de créer quelque chose comme ça dans ui matériel?

Answer 1

Créez un composant pour chaque bouton et attribuez-lui un className qui définit la couleur de fond comme les couleurs non marquées de votre image. className doit être la propriété state.

Après que l'intérieur onClick changement state propriété à la classe css qui a fond rouge.

Par exemple:

class Button extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = {buttonDesign: "not-selected"}; 
     this.handleClick = this.handleClick.bind(this); 
    } 

    handleClick() { 
     if (this.state.buttonDesign == "selected"){ 
      this.setState({ 
      buttonDesign: "not-selected" 
      }); 
     } 
     else if (this.state.buttonDesign == "not-selected"){ 
      this.setState({ 
      buttonDesign: "selected" 
      }); 
     } 
     } 
    }; 

    render() { 
     return(
      <button className={this.state.buttonDesign} onClick={this.handleClick}> 
       "your button name" 
      </button> 
     ); 
    } 
} 

et dans votre fichier css vous devriez avoir quelque chose comme ceci:

.not-selected { 
    background-color : #ff9191; // or your color 
} 
.selected{ 
    background-color: #ff0000; // or your color 
} 

Et vous auriez besoin d'une certaine logique pour suivre ceux qui ont été sélectionnés.