Reactstrap:让Modal工作
尝试学习React和Reactstrap，并尝试让模态函数工作。当我点击按钮时，它应该会切换Modal，但现在它给出了这个错误:元素类型无效:需要一个字符串(对于内置组件)或一个类/函数(对于复合组件)，但got: undefined。检查“App”的render方法
不知道我做错了什么。有没有人能告诉我哪里出错了？感谢你能给予的任何帮助。
如果可能的话，我想使用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);回答 3
Stack Overflow用户
发布于 2018-07-05 02:21:47
我不知道如何像你那样通过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
Stack Overflow用户
发布于 2020-03-18 01:31:42
这样做要容易得多。
在构造函数示例中添加状态
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';Stack Overflow用户
发布于 2019-05-28 07:25:19
Reactstrap Modal不显示，因为需要将淡入淡出设置为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
https://stackoverflow.com/questions/48567247
复制相似问题
腾讯云开发者
