材料UI字段選擇器

Question

我想創造這樣的事情

所以我可以域之間進行選擇，怎麼可能建立在物質的UI這樣的事情？

Answer 1

爲每個按鈕創建一個組件，併爲其指定一個className，它定義背景顏色，如圖像上的未標記背景顏色。 className應該是state財產。

之後在onClick之後將state屬性更改爲具有紅色背景的css類。

例如：

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

，並在你的CSS文件，你應該有這樣的事情：

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

而你也需要一些邏輯來跟蹤哪些已經被選中。