[英]Reactstrap: Getting Modal to work
嘗試學習 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);
我不知道如何像你一樣通過 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 時, 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
這種方式要容易得多
在構造函數示例中添加您的狀態
this.state={showLogOut: false}
在您的回報中,您只需要 setState true 示例
<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';
Reactstrap Modal 不顯示,因為需要將 fade 設置為 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 的一部分
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.