反应：渲染一个晶圆厂

Question

我有一个称为键盘的div，我想渲染一系列浮动操作按钮，以使它们在div中平均分配。当它们只是元素时，此方法有效，但现在当我将它们更改为Fab时，它们超过了div。另外，当我进行更改时，我的大写方法也不再起作用。

App.css

.keyboard {
  width: 30%;
  height: 5%;
  position: absolute;
  top: 52%;
  left: 20%;
  display: flex;
  justify-content: space-between;
}

App.js

class App extends React.Component {
  render() {
    return (
      <div className="keyboard">
        <Keyboard />
      </div>
    );
  }

Keyboard.jsx

import Fab from "@material-ui/core/Fab";

class Keyboard extends Component {
  state = {
    keys: [
      ["Á", "É", "Í", "Ñ", "Ó", "Ú", "Ü"],
      ["á", "é", "í", "ñ", "ó", "ú", "ü"]
    ],
    punctuation: ["¿", "¡"],
    modifiers: ["↓", "↑"],
    index: 0
  };

  render() {
    return (
      <div class="btn-group special" role="group" aria-label="...">
        <Fab
          type="button"
          className="btn btn-default"
          onClick={() => {
            this.capitalise();
          }}
        >
          {this.state.modifiers[this.state.index]}
        </Fab>
        {Object(
          //this.state.keys[this.state.index].map(key => {
          this.getKeyboard().map(key => {
            return (
              <Fab type="button" className="btn btn-default">
                {key}
              </Fab>
            );
          })
        )}
      </div>
    );
  }

  capitalise = () => {
    var index = this.state.index;
    var newIndex = (index + 1) % 2;
    this.setState({ index: newIndex });
  };

  getKeyboard = () => {
    return this.state.keys[this.state.index].concat(this.state.punctuation);
  };
}

export default Keyboard;