0
나는 photoalbums가있는 페이지가 있으며, 앨범 구성 요소의 편집 버튼을 클릭하여 각 앨범을 편집해야합니다. 공통 저장소가없는 경우 구성 요소 간 통신 방법을 이해할 수 없습니다. (예 : redux) 하위 구성 요소의 부모 구성 요소 상태를 추적하는 방법 - 모달?ReactJs에서 하위 구성 요소의 부모 구성 요소 상태를 추적하는 방법은 무엇입니까?
var AlbumsPage = React.createClass({
\t render: function()
\t {
\t \t return(
\t \t \t \t <div>
\t \t \t \t \t <AlbumList url="Album/List"/>
\t \t \t \t </div>
\t \t \t);
\t }
});
var AlbumList = React.createClass({
\t componentDidMount: function()
\t {
\t \t $.ajax({
\t \t \t url: this.props.url,
\t \t \t dataType: 'json',
\t \t \t method: "POST",
\t \t \t cache: false,
\t \t \t success: function (data) {
\t \t \t \t this.setState({ data: data.Albums });
\t \t \t }.bind(this),
\t \t \t error: function (xhr, status, err) {
\t \t \t \t console.error(this.props.url, status, err.toString());
\t \t \t }.bind(this)
\t \t });
\t },
\t getInitialState: function()
\t {
\t \t return this.getAlbumListState();
\t \t
\t },
\t getAlbumListState: function()
\t {
\t \t return {
\t \t \t data: [],
\t \t \t currentAlbum: null,
\t \t \t showModal: false
\t \t }
\t },
\t setCurrentAlbum: function(album){
\t \t this.state.currentAlbum = album;
\t },
\t setShowModal : function(val){
\t \t this.state.showModal = val;
\t },
\t getShowModal: function(){
\t \t return this.state.showModal;
\t },
\t render: function() {
\t \t var albums = this.state.data.map(function(album) {
\t \t \t return (
\t \t \t \t <Album key={ album.Id } title={ album.Title } getShowModal={ this.getShowModal } setCurrentAlbum={ this.setCurrentAlbum } setShowModal={ this.setShowModal }></Album>
\t \t \t );
\t \t }, this);
\t \t
\t \t return (
\t \t \t <div>
\t \t \t \t <div>
\t \t \t \t \t { albums }
\t \t \t \t </div>
\t \t \t \t <AlbumModal showModal={ this.state.showModal } currentAlbum={ this.state.currentAlbum }/>
\t \t \t </div>
\t \t);
\t }
});
var Album = React.createClass({
\t open : function()
\t {
\t \t console.log("open fired");
\t \t console.log(this.props.getShowModal());
\t \t if (this.props.getShowModal()) {
\t \t \t this.props.setShowModal(false);
\t \t \t this.props.setCurrentAlbum(null);
\t \t } else {
\t \t \t this.props.setShowModal(true);
\t \t \t this.props.setCurrentAlbum(this.props.album);
\t \t }
\t },
\t render: function() {
\t \t return (
\t \t \t \t <div className="col-sm-3 col-md-3">
\t \t \t \t <div className="thumbnail">
\t \t \t \t \t <div className="caption">
\t \t \t \t \t \t <h3>{ this.props.title }</h3>
\t \t \t \t \t \t <p>
\t \t \t \t \t \t \t <a onClick={ this.open }><span className="glyphicon glyphicon-pencil"></span></a>
\t \t \t \t \t \t \t <a><span className="glyphicon glyphicon-trash"></span></a>
\t \t \t \t \t \t </p>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t \t </div>
\t \t);
\t }
});
var AlbumModal = React.createClass({
\t getInitialState: function() {
\t \t
\t \t return {
\t \t \t showModal: this.props.showModal,
\t \t \t currentAlbum: this.props.currentAlbum
\t \t };
\t },
\t close: function() {
\t \t this.setState({ showModal: false });
\t },
\t open: function() {
\t \t this.setState({ showModal: true });
\t },
\t render: function() {
\t \t return (
<div>
<ReactBootstrap.Modal show={this.state.showModal} onHide={this.close}>
<ReactBootstrap.Modal.Header closeButton>
<ReactBootstrap.Modal.Title>Modal heading</ReactBootstrap.Modal.Title>
</ReactBootstrap.Modal.Header>
<ReactBootstrap.Modal.Body>
<h4>Text in a modal</h4>
</ReactBootstrap.Modal.Body>
<ReactBootstrap.Modal.Footer>
<ReactBootstrap.Button onClick={this.close}>Close</ReactBootstrap.Button>
</ReactBootstrap.Modal.Footer>
</ReactBootstrap.Modal>
</div>
)
}
});
ReactDOM.render(
<AlbumsPage />,
document.getElementById('albums')
);
사용하는 것입니다. 여기에 너무 많은 일이 일어나고 있습니다. 무엇을 묻고 있는지 명확하지 않습니다. –