Reactstrap：让 Modal 工作

Posted 2023-03-23

【中文标题】Reactstrap：让 Modal 工作

【英文标题】：Reactstrap: Getting Modal to work

【发布时间】：2018-07-12 01:02:48

【问题描述】：

尝试学习 React 和 Reactstrap 并尝试让 Modals 工作。当我单击按钮时，它应该切换模态，但现在它给了我这个错误：元素类型无效：期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但是得到：未定义.检查'App'的渲染方法

无法弄清楚我做错了什么。有人可以帮我知道我要去哪里错了吗？感谢您提供的任何帮助。

如果可能，我想使用最新版本的 React 和 Reactstrap。

这是 Codepen 上的链接：https://codepen.io/lieberscott/pen/ddYNVP

const  Button,
       Container,
       Modal,
       ModalTitle,
       ModalHeader,
       ModalBody,
       ModalFooter  = Reactstrap;

class App extends React.Component 
  constructor(props) 
    super(props);
    this.state = 
      showModal: false
    
    this.toggleModal = this.toggleModal.bind(this);
  

  toggleModal() 
    console.log("hello");
    this.setState(
      showModal: !this.state.showModal
    )
  

  render() 
    return (
      <Container>
        <Headline />
        <Box />
        <Button outline color="primary" onClick=this.toggleModal>Click</Button>
        <Modal isOpen=this.state.showModal toggle=this.toggleModal className="modal">
          <ModalHeader>
            <ModalTitle id="modalTitle">
              Add a Recipe
            </ModalTitle>
          </ModalHeader>
          <ModalBody>
            Modal body
          </ModalBody>
          <ModalFooter>
            Modal footer
          </ModalFooter>
        </Modal>
      </Container>
    );
  


class Headline extends React.Component 
  render() 
    return (
      <div>
        Recipes
      </div>
    );
  


class Box extends React.Component 
  constructor(props) 
    super(props);
    this.state = 
      items: [
        
        name: "Tofu tacos",
        ingredients: [
          "Shells",
          "lettuce",
          "tofu",
          "paprika"
        ]
      ,
      
        name: "Spaghetti",
        ingredients: [
          "pasta",
          "sauce",
          "salt"
        ]
      
      ] // end of items
     // end of this.state
   // end of constructor
  render() 
    const allitems = this.state.items.map(item => 
      return (
        <div>
          item.name
        </div>
      );
    )
    return (
      <div>
        allitems
      </div>
    );
  


const app = document.getElementById("app");

ReactDOM.render(<App />, app);

【问题讨论】：

你没有在任何地方使用你的 Reactstrap const..

【参考方案1】：

我不知道如何像你一样通过 codepen 分享我的代码，抱歉。

我做了这些改变：

toggleModal() 
    console.log("hello");
    console.log( 'before setState: ', this.state );
    this.setState(
      showModal: !this.state.showModal
    )
    console.log( 'after setState: ', this.state );
  

Button onClick 事件，当您执行onClik=this.something 时，此this 指的是Button 元素。我改为：

<Button outline color="primary" onClick=() => this.toggleModal()>Click</Button>

当我这样做时，onClick= () => this.something() 允许我使用我的类的方法。

只需查看 console.log 输出，您就会看到单击按钮将 showModal 更改为 true 或 false。

看看 cephalization 的回答：https://forum.freecodecamp.org/t/difference-in-reactjs-onclick-function-binding/116027/2

【讨论】：

请注意toggleModal方法已经绑定在构造函数中：this.toggleModal = this.toggleModal.bind(this);

是的，你是对的，但是setState如果不是这样就不起作用，我不知道为什么。

它可以工作，如果你把console.log(this.state.showModal) 放在toggleModa 里面，它会正确显示之前的状态值。请注意，setState 是异步的，因此在使用 setState 后立即打印状态值不会显示更新后的值

如何检查状态是否发生了变化？

【参考方案2】：

这样就容易多了

在构造函数示例中添加你的状态

 this.state=showLogOut: false

在你的回报中，你所需要的只是 setState 真实的例子

<Button onClick=() => this.setState(showLogOut: true)>Show modal</Button>

现在我们只需要模式代码，因为我们有一个状态和一个 setState

<Modal isOpen=this.state.showLogOut fade="false"  toggle=() => this.setState(showLogOut: false)>
<ModalHeader toggle=() => this.setState(showLogOut: false)>Ready to leave?</ModalHeader>
    <ModalBody>   
        <p>Press logout to end session.</p>                     
    </ModalBody>
<ModalFooter>

    <Button onClick=() => this.setState(showLogOut: false)>Cancel</Button>
    <Button color="info">Logout</Button>
</ModalFooter>

这应该足以显示您的模式：我假设您正在使用 react-strap 并且您正在导入所需的元素，但只是为了确保这里是您需要导入的内容

import  Button, Modal, ModalBody, ModalFooter, ModalHeader from 'reactstrap';

【参考方案3】：

Reactstrap 模态不显示，因为需要淡入淡出设置为 False。请看看我的代码谁工作。

class Demoextends extends React.Component 
constructor(props) 
    super(props);
    this.state = 
        modal: false,
        fade: false
    ;
    this.toggle = this.toggle.bind(this);
;
toggle() 
    console.log("hello");
    this.setState(
        modal: !this.state.modal
    );
    console.log( 'after setState: ', this.state );

render() 
    return (
        <div>
            <Button color="danger" onClick=this.toggle>Launch</Button>
            <Modal isOpen=this.state.modal fade=this.state.fade   toggle=this.toggle>
                <ModalHeader toggle=this.toggle>Modal title</ModalHeader>
                <ModalBody>                        
                </ModalBody>
                <ModalFooter>
                    <Button onClick=this.toggle>Do Something</Button>' '
                    <Button onClick=this.toggle>Cancel</Button>
                </ModalFooter>
            </Modal>
        </div>
    );

导出默认Demoextends；

当然，你必须在代码中添加 reactstrap 的一部分