response.js и модальное неправильное поведение - PullRequest
Новая
       32

response.js и модальное неправильное поведение

0 голосов
/ 27 марта 2019

Итак, у меня есть этот большой грязный компонент, я постараюсь уменьшить его, но сохраняю большую его часть, так как я не уверен на данный момент, что может быть причиной.

Проблема в том, что игра работает как положено. Когда модальное время рендерится, оно появляется в левом нижнем углу страницы, а слева от стиля нет плавающего стиля. Функциональность, однако, работает как положено, кнопки работают, и он отображает необработанный контент. 

import { Modal } from 'antd';
//rest of imports

const initialState = {
  visible: false,
  streak: 0,
  score: 0,
  turn: 0,
  previousPicks: [],
  result: { result: "", player: "", computer: "" }
};

class Game extends React.Component {
  constructor(props) {
    super(props);
    this.turnLimit = 10;
    this.state = initialState;
  }

  componentWillUnmount() {
    this.setState(initialState)
  }

  updateScore = () => {
    //handles score
  }

  updatePreviousPicks = () => {
    //update game data
  }

  onClickHandler = async (choice) => {
    //fetching data from backend 
          self.showModal();
  }

  getAIResult = () => {
    //
  }

  showModal = () => {
    if (this.state.turn === 10) {
      this.setState({
        visible: true,
      });
    }
  }

  handleOk = () => {
    this.setState(initialState)
  }

  handleCancel = () => {
    this.setState(initialState)
  }

  render() {
    return (
      <div>
        <div>


        <Modal
          title="Basic Modal"
          centered={true}
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}></Modal>


          </div>
        <div className="container">
          <div id="rockDiv" className={`choice`} onClick={() => this.onClickHandler("rock")}>
            <Choices choice="rock"></Choices>
          </div>
          <div id="paperDiv" className={`choice`} onClick={() => this.onClickHandler("paper")}>
            <Choices choice="paper"></Choices>
          </div>
          <div id="scissorsDiv" className={`choice`} onClick={() => this.onClickHandler("scissors")}>
            <Choices choice="scissors"></Choices>
          </div>
          <Score score={this.state.score} bonus={this.state.streak} turn={this.state.turn} />
          <div id="PlayerResult" className={this.state.result.result}  >
            {this.state.turn >= 1 ? <p>You</p> : <p></p>}
            <Answer choice={`${this.state.result.player}`} />
          </div>
          <div id="AIResult" className={this.getAIResult()} >
            {this.state.turn >= 1 ? <p>AI</p> : <p></p>}
            <Answer choice={`${this.state.result.computer}`} />
          </div>
        </div>
      </div>
    )
  }
}

export default Game

Я попытался удалить весь CSS из компонента, и все же модальное изображение не отображается с дизайном antd по умолчанию?

Ответы [ 2 ]

1 голос
/ 27 марта 2019

Как я понимаю, текущий стиль у вас не похож на пример Antd. Вам не хватает таких стилей Antd, как этот. 

import { Modal, Button } from "antd";
import "antd/dist/antd.css";

Просто нужен стиль импорта, у вас будет то, что вам нужно. Вы можете проверить мой пример здесь https://codesandbox.io/embed/8lr93mw8yj

0 голосов
/ 27 марта 2019 
<Modal
          title="Basic Modal"
          centered="true"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}></Modal>

Вам не нужно заключать здесь "true" в скобки, поскольку вы не вызываете переменную.

...