材质 Ui 字段选择器答案

【问题标题】：Material Ui Field picker材质 Ui 字段选择器
【发布时间】：2017-10-21 17:35:55
【问题描述】：

我想创造这样的东西

所以我可以在字段之间进行选择，怎么可能在material ui中创建这样的东西？

【问题讨论】：

是的。但我想你并不是真的在问这个。如果你问如何，它对于 Stack Overflow 来说太宽泛了。如果您要问从哪里获得执行此操作的组件，那也是题外话。所以不幸的是，您的问题似乎不适合在这里，但如果“是”不足以回答它，至少编辑它以包含您的问题的更多细节。
@SamiKuhmonen，我已经阅读了 MateriaUi 文档，但没有找到如何创建这样的东西。也许我错过了什么。

标签： css reactjs material-ui

【解决方案1】：

为每个按钮创建一个组件，并给它一个className 来定义背景颜色，就像图像上未标记的颜色一样。 className 应该是 state 属性。

在onClick之后，将stateproperty 更改为具有红色背景的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
}

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

【讨论】：

有没有办法静态处理？
你是什么意思？
仅使用 Material-ui 和芯片组件。我知道我要使用的所有数据，所以我想把它们放在一个数组中，并显示它们，这样我就可以在它们之间进行选择。