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

你需要一些逻辑来跟踪哪些被选中。