反応モーダルを使用して、自分のコンポーネントの1つでポップアップを設定しています。私は、反応モーダルで包まれたdivをレンダリングするコンポーネントを持っています。私の親コンポーネントは、isOpenをfalseに設定してモーダルコンポーネントをロードしてレンダリングします。親のリンクをクリックすると、isOpenがtrueに設定され、モーダルポップアップが開きます。反応モーダルポップアップ変更後のReactjsリフレッシュ親データ
開いているポップアップ内で自分のデータを変更してから、変更を保存し、閉じるボタンをクリックするとモデルを閉じます。
私は、データの変更と状態の変化を処理するアクションとレデューサーを備えたreduxを使用しています。
概念的には、ポップアップからの変更を表示するために親をどのように更新しますか?操作を使用してデータを変更して、ストアを再生成してコンポーネントのデータを更新しないでください。保存後に明示的に「更新」する必要がありますか?私の問題は、ポップアップが閉じたときに、DataViewコンポーネントの「リフレッシュ」が何も起きていないことです。以下
コンポーネント:
のDataViewコンポーネント
import React from 'react';
import DataView from './MonthView.js';
import DataViewPopup from './MonthViewPopup.js';
import { connect } from 'react-redux';
import { getAction } from '../actions/actions.js';
import { getActionAll } from '../actions/actions.js';
import { getPopupData } from '../actions/actions.js';
class DataViewContainer extends React.Component {
constructor() {
super();
this.popupCategory = undefined;
this.popupMonth = undefined;
this.state = {
detailPopup : false,
refreshView: false
}
this.handleAddYear = this.handleAddYear.bind(this);
this.handleSubtractYear = this.handleSubtractYear.bind(this);
this.handleGetDetail = this.handleGetDetail.bind(this);
}
componentDidMount() {
this.props.getAction(2016);
this.props.getActionAll(2016);
}
render() {
return (
<div className="row">
<div className="col-sm-8">
<MonthView transactions={this.props.storeData.storeData} selectedYear={this.props.storeData.selectedYear} onAddYear={this.handleAddYear} onSubtractYear={this.handleSubtractYear} onHandleGetDetail={this.handleGetDetail} />
</div>
<div className="col-sm-4">
<MonthViewPopup modalActive={this.state.detailPopup} transactions={this.props.storePopupData.getPopupData} selectedYear={this.props.storeTransactions.selectedYear} category={this.popupCategory} month={this.popupMonth}/>
</div>
</div>
)
}
handleGetDetail(category,month) {
console.log("props inside handleGetDetail: ", this.props);
this.popupCategory = category;
this.popupMonth = month;
let popupYear = this.props.storeTransactions.selectedYear
this.props.getPopupData(popupYear, month, category);
this.setState({ detailPopup: true}, function() {});
}
}
const mapStateToProps = (state) => ({
storeData: state.storeData,
storePopupData: state.storePopupData,
storeDataAll: state.storeDataAll
});
export default connect(mapStateToProps, {getAction,getActionAll,getPopupData})(DataViewContainer);
DataViewPopupコンポーネント
import React from 'react';
import Modal from 'react-modal';
import { connect } from 'react-redux';
import { saveAction } from '../actions/actions.js';
import { getActionAll } from '../actions/actions.js';
class DataViewPopup extends React.Component {
constructor (props) {
super(props)
this.editedData = new Map();
this.state = {
modalIsOpen: false
};
this.openModal = this.openModal.bind(this);
this.afterOpenModal = this.afterOpenModal.bind(this);
this.closeModal = this.closeModal.bind(this);
this.renderFilteredTransactions = this.renderFilteredTransactions.bind(this);
}
openModal() {
this.setState({modalIsOpen: true});
}
afterOpenModal() {
console.log("inside afterOpenModal");
}
closeModal() {
this.props.saveTransactions(this.editedData);
this.editedData = new Map();
this.setState({ modalIsOpen: false }, function() {});
}
componentWillUnmount() {
this.props.getDataAll(); // i tried this but it does not work because the component (modal popup) is still mounted, but just not visible
//this.props.refreshParent();
}
componentWillReceiveProps(nextProps){
if (nextProps.modalActive === true) {
this.openModal();
return;
}
}
render() {
return <div>
<Modal
isOpen={this.state.modalIsOpen}
//isOpen={this.modalActive}//not needed as is currently setup
onAfterOpen={this.afterOpenModal}
onRequestClose={this.closeModal}
//style={customStyles}
contentLabel="Example Modal"
>
<button onClick={this.closeModal}>close</button>
{this.renderFilteredTransactions(this.props.data,this.props.category,this.props.month)};
</Modal>
</div>
}
renderFilteredTransactions(trans,category,month){
return <div>
<table>
<tbody className="mo-tblBody">
{trans && trans.map((data,index) =>
<tr key={data.transid}>
<td>{data.transid}</td>
<td>
{this.renderCategory(data.category,index,data.transid)}
</td>
</tr>
)}
</tbody>
</table>
</div>
}
handleCategoryChange(value,transIndex,transId){
let trans = JSON.parse(JSON.stringify(this.props.transactions));
//add or updated transaction to this.editedTransactions based on whether or not the transid already exists
trans.filter(item => item.transid === transId)
.map(item => this.editedData.set(transId,
Object.assign({}, item, { category: value })));
}
}
const mapStateToProps = (state) => {
return {storeDataAll: state.storeDataAll,
storeSaveData: state.storeSaveData
}
};
export default connect(mapStateToProps, {getDataAll,saveData})(DataViewPopup);
私はいつかこの昨年作られた..しかし、それはあなたが(モーダルReduxの反応)を助けることがあります。https://codepen.io/jzmmm/pen/mEaoaQ/ – jzm
親がReduxのストアから状態を取得することができます。あなたは減速器を設定しました – Muhaimin
jzm、私は見て、私は同様の設定を持っています。私の問題は、モーダルコンポーネントがストア内のデータを変更した後に、モーダルコンポーネントを保持する親コンポーネントをリフレッシュすることです。何が起こるかは、別のページに移動して戻ってきたときに親がリフレッシュされ、私の変更が表示されます。私が望むのは、モーダルコンポーネントを閉じるとすぐに変更が表示されることです。私がcomponentDidMountのストアからデータを取得しているので、親がすべてロードすると問題はありません。 –