如何使用Material-UI创建此可滚动网格状视图？

Posted 2021-04-12

我需要通过Material-UI实现az观众席查看器和座位选择器屏幕，但是我没有找到任何类似的控件。

您建议用什么来实现此屏幕？

答案

我很无聊，所以我用TicToc Tutorial from React中的组件构建了一个简单的例子，这里有个简单的例子：

作为js文件：

import React from 'react';
import './App.css';
import Grid from '@material-ui/core/Grid';



class Board extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      squares: Array(Math.abs(1+this.props.end-this.props.init)).fill(null),
    };
  }

  handleClick(i) {
    const squares = this.state.squares.slice();
    squares[i] = squares[i] ? 0 : 1;
    this.setState({squares: squares});
  }

  renderSquare(i) {
    return (
      <Square
        value={this.state.squares[i]}
        onClick={() => this.handleClick(i) }
        id={i}
      />
    );
  }

  renderBoard(init,end) {
    var line = [];
    for(let i=init; i<=end; i++) {
      line.push(this.renderSquare(i));
    }
    return (
        line
    );
  }

  render() {

    return (
      <div>
        <Grid container>
          {this.renderBoard(this.props.init,this.props.end)}
        </Grid>
      </div>
    );
  }
}
class Square extends React.Component {
  render() {
    return (
      <button
        className="square"
        onClick={() => this.props.onClick()}
        style={{ backgroundColor: this.props.value ? 'green' : 'black'}}
      >
      {this.props.id}
      </button>
    );
  }
}

class Scene extends React.Component {
  render() {
    return (
      <Grid container>
        <Grid item xs="6">
          <Board init={1} end={11}/>
          <Board init={2} end={11}/>
          <Board init={3} end={10}/>
          <Board init={4} end={9}/>
          <Board init={2} end={11}/>
          <Board init={0} end={11}/>
        </Grid>
        <Grid item xs="6">
          <Board init={10} end={1}/>
          <Board init={6} end={12}/>
          <Board init={9} end={13}/>
        </Grid>
      </Grid>
    );
  }
}
export default Scene;

App.css文件：

.square {
  border: 1px solid #999;
  float: left;
  font-size: 24px;
  font-weight: bold;
  line-height: 34px;
  height: 34px;
  margin-right: -1px;
  margin-top: -1px;
  padding: 0;
  text-align: center;
  width: 34px;
  color: #fff;
}