材料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 
} 

而你也需要一些逻辑来跟踪哪些已经被选中。