我对更新道具有疑问。我有两个组成部分。第一个是App,其中有一个用于打开或关闭模式的按钮。第二是模态结构。第一个组件存储状态,我单击按钮,状态发生变化,我将道具发送到ModalComponent
组件(模态正在打开)。如果要关闭模式,则应在此组件中更改此状态。但是,如果我单击模式中的Cancel
按钮,则什么也不会发生。状态不会改变。如何更改它,它将如何在孩子和父母之间进行交流?
这是我的代码
ModalComponent
import React, { Component } from "react";
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
class ModalComponent extends Component {
constructor(props) {
super(props);
this.state = {
modal: props.modal
};
this.toggle = this.toggle.bind(this);
}
toggle() {
const { modal } = this.state;
this.setState({
modal: !modal
});
}
render() {
const { modal } = this.props;
return (
<div>
<Modal isOpen={modal} toggle={this.toggle}>
<ModalHeader toggle={this.toggle}>Halo</ModalHeader>
<ModalFooter>
<Button onClick={this.toggle}>Cancel</Button>
</ModalFooter>
</Modal>
</div>
);
}
}
export default ModalComponent;
应用
import React from "react";
import ReactDOM from "react-dom";
import Modal from "./modal";
import { Button } from "reactstrap";
import "./styles.css";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
modal: false
};
this.toggle = this.toggle.bind(this);
}
toggle() {
const { modal } = this.state;
this.setState({
modal: !modal
});
}
render() {
const { modal } = this.state;
return (
<div>
<Button
type="link"
onClick={this.toggle}
>
Delete account
</Button>
<Modal modal={modal} />
</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
答案 0 :(得分:2)
模态组件中的状态会改变,但是您没有使用它来设置isOpen
组件上的Modal
道具。
此外,您不得使用可直接从道具派生的状态。您必须改为从父级传递一个处理程序,以更新父级本身中的状态
ModalComponent
import React, { Component } from "react";
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
class ModalComponent extends Component {
render() {
const { modal } = this.props;
return (
<div>
<Modal isOpen={modal} toggle={this.toggle}>
<ModalHeader toggle={this.props.toggle}>Halo</ModalHeader>
<ModalFooter>
<Button onClick={this.props.toggle}>Cancel</Button>
</ModalFooter>
</Modal>
</div>
);
}
}
export default ModalComponent;
应用
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
modal: false
};
this.toggle = this.toggle.bind(this);
}
toggle() {
const { modal } = this.state;
this.setState({
modal: !modal
});
}
render() {
const { modal } = this.state;
return (
<div>
<Button
type="link"
onClick={this.toggle}
>
Delete account
</Button>
<Modal modal={modal} toggle={this.toggle}/>
</div>
);
}
}
答案 1 :(得分:0)
您现在所拥有的方式,模态正在设置其自己的状态,但它仍从父级接收道具,从而保持其打开状态。
这是一种实现方法的示例。请注意,打开和关闭都使用父状态而不是子状态来处理。
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
class App extends React.Component {
state = { open: false };
toggle = () => {
this.setState({ open: !this.state.open });
};
render() {
return (
<React.Fragment>
something
<Modal show={this.state.open} />
<Child toggle={this.toggle} />
</React.Fragment>
);
}
}
const Child = ({ toggle }) => {
return <button onClick={toggle}>toggle</button>;
};
const Modal = ({ show }) => {
if (show) {
return <h1>I am a modal</h1>;
}
return null;
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
CodeSandbox here。