reactjs Reactstrap：让Modal发挥作用

hlswsv35 于 2023-02-03 发布在 React

关注(0)|答案(3)|浏览(161)

尝试学习React和Reactstrap并尝试让Modal工作。当我点击按钮时，它应该切换Modal，但现在它给我这个错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。请检查"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);

reactjs

来源：https://stackoverflow.com/questions/48567247/reactstrap-getting-modal-to-work

3条答案

按热度按时间

xjreopfe1#

我不知道如何像你一样通过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。
来看看头部化的答案：https://forum.freecodecamp.org/t/difference-in-reactjs-onclick-function-binding/116027/2

赞(0）回复(0）举报 2023-02-03

k2arahey2#

这样就容易多了
在构造函数示例中添加状态

this.state={showLogOut: false}

在返回中，您所需要只是setState true示例

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

现在我们需要的是模态代码，因为我们有一个state和一个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';

赞(0）回复(0）举报 2023-02-03

fivyi3re3#

Reactstrap模态不显示，因为是需要褪色设置为假。请看看我的代码谁工作。

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>
    );
}

}
导出默认演示扩展;
当然你必须在你的代码中加入reactstrap的一部分

赞(0）回复(0）举报 2023-02-03

我来回答

reactjs Reactstrap：让Modal发挥作用

3条答案

相关问题

热门标签

最新问答