Question

我试图使用react bootstrap modal在单击按钮时弹出一个表单，但是没有呈现出来。该表单是另一个文件中定义的单独组件。

我已经导入了表单和模式，并尝试如下渲染

Table, 0x282a00c30, {{0.0, 88.0}, {375.0, 641.0}}
    Other, 0x282a184e0, {{0.0, 88.0}, {375.0, 44.0}}, identifier: 'XXX'
        StaticText, 0x282a185b0, {{0.0, 88.0}, {375.0, 44.0}}, label: 'XXX'
    Cell, 0x282a18680, {{0.0, 132.0}, {375.0, 78.0}}, identifier: 'XXX', label: 'XXX', value: 0.00
        StaticText, 0x282a18750, {{127.0, 167.7}, {62.0, 13.3}}, label: 'XXX', value: 5
        StaticText, 0x282a18340, {{127.0, 151.3}, {27.0, 14.3}}, label: 'XXX'
        Button, 0x282a18820, {{127.0, 183.0}, {50.0, 8.0}}
        Image, 0x282a188f0, {{352.0, 165.0}, {8.0, 12.0}}, identifier: 'XX'
    Cell, 0x282a189c0, {{0.0, 210.0}, {375.0, 78.0}}, identifier: 'XXX', label: 'XXX', value: 0.00
        StaticText, 0x282a18a90, {{127.0, 237.0}, {137.7, 14.3}}, label: 'XXX'
        Button, 0x282a18b60, {{127.0, 253.3}, {50.0, 8.0}}
        Image, 0x282a18d00, {{352.0, 243.0}, {8.0, 12.0}}, identifier: 'XXX'
    Cell, 0x282a18dd0, {{0.0, 288.0}, {375.0, 78.0}}, identifier: 'XXX', label: 'XXX', value: 0.00
        StaticText, 0x282a18ea0, {{127.0, 315.0}, {137.7, 14.3}}, label: 'XXX'
        Button, 0x282a18f70, {{127.0, 331.3}, {50.0, 8.0}}
        Image, 0x282a19040, {{352.0, 321.0}, {8.0, 12.0}}, identifier: 'XXX'

import AddTaskForm from './Forms/taskForm';
import { Modal } from 'react-bootstrap';

状态和功能定义为

{
 this.state.open &&
 <Modal 
 show={this.state.open} onHide={this.handleClose}>
 <Modal.body>
 <AddTaskForm />
 </Modal.body> 
 </Modal>
}

该按钮实现为

constructor(){
        super();
        this.state={
            // visibility: false,
            open: false
        }
    }
handleOpen = () => {
      this.setState({ open: true });
    };

handleClose = () => {
      this.setState({ open: false });
    };

在单击按钮时将弹出空白页。我要去哪里错了？这是我第一手进行反应的经验，因此发现调试起来很困难。谢谢。

表单未在Modal React-Bootstrap中呈现

0 个答案: