react.js antd modal错误行为答案

【问题标题】：react.js antd modal wrong behaviourreact.js antd modal错误行为
【发布时间】：2019-03-27 17:53:14
【问题描述】：

所以我有这个大而杂乱的组件，我会尝试缩小它，但保留大部分，因为我目前不确定可能是什么原因。

问题是，游戏按预期运行。当模态框需要渲染时，它会出现在页面的左下角，没有样式向左浮动。然而，该功能按预期工作，按钮工作并显示原始内容。

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 设计的模态仍然不显示？

【问题讨论】：

您使用的是哪个模态库？
@TungDuong 我用的是antd，我现在已经把它包含在代码里了:)

标签： javascript css reactjs modal-dialog antd

【解决方案1】：

据我了解，您当前的风格不喜欢 Antd 的示例。缺的是你没有像这样导入Antd的样式。

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

只需要导入样式，你就会有你需要的。你可以在这里查看我的例子https://codesandbox.io/embed/8lr93mw8yj

【讨论】：

【解决方案2】：

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

您不需要在此处将"true" 括在括号中，因为您没有调用变量。

【讨论】：