0
私は写真のアルバムがあるページがあります。アルバムコンポーネントの編集ボタンをクリックして各アルバムを編集する必要があります。私は共通の店舗がない場合（例えば、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')
);
用いることであろう。あまりにも多くのここに行くとあなたが尋ねているものは不明です –