Werkstoff Ui Feld Picker

Question

ich so etwas wie dieses

erstellen möchten So kann ich zwischen den Feldern wählen, wie ist es möglich, so etwas wie dies in Material ui zu schaffen?

Answer 1

Erstellen Sie eine Komponente für jede Schaltfläche, und geben Sie ihr eine className, die Hintergrundfarbe wie die nicht markierten an Ihrem Bild definiert. className sollte state Eigenschaft sein.

Danach innerhalb onClick ändern Sie diese state Eigenschaft in die CSS-Klasse, die roten Hintergrund hat.

Zum Beispiel:

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> 
     ); 
    } 
} 

und in der CSS-Datei sollten Sie etwas wie dieses:

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

Und Sie würden eine gewisse Logik müssen, welche diejenigen verfolgen ausgewählt wurden.