0
我有兩個反應與onAfterOpens像這樣定義的情態動詞:ReactJS循環executeAction
import React from 'react';
import JobList from './JobList';
import RightPanel from './RightPanel';
import LoadJobsScreen from '../../actions/jobs-screen/LoadJobsScreen';
import UserStore from '../../stores/UserStore';
import LoadUsers from '../../actions/global/LoadUsers';
import LoadUsersByDepartment from '../../actions/global/LoadUsersByDepartment';
import Modal from 'react-modal';
export default class JobScreen extends React.Component {
static contextTypes = {
executeAction: React.PropTypes.func.isRequired,
getStore: React.PropTypes.func.isRequired
};
componentWillMount() {
this.displayName = 'JobScreen'
this.state = {
traderModalOpened: false,
OFTModalOpened: false,
users: this.context.getStore(UserStore).getUsers(),
}
this.context.getStore(UserStore).on('change',() => {
this.setState({
users: this.context.getStore(UserStore).getUsers()
});
});
this.context.executeAction(LoadJobsScreen, this);
}
toggleTraderModal() {
this.setState({
traderModalOpened: !this.state.traderModalOpened
});
console.log(this.state.traderModalOpened);
}
toggleOFTModal() {
this.setState({
OFTModalOpened: !this.state.OFTModalOpened
});
console.log(this.state.OFTModalOpened);
}
render() {
var users = [];
this.state.users.forEach((user) => {
users.push(
<option value={user.id}>{user.firstName}</option>
);
});
return (
<div className="jobs-screen">
<div className="col-xs-12 col-sm-10 job-list" ><JobList toggleTraderModal={this.toggleTraderModal.bind(this)} toggleOFTModal={this.toggleOFTModal.bind(this)}/></div>
<div className="col-xs-12 col-sm-2 panel-container">
<div className="right-panel pull-right"><RightPanel /></div>
</div>
<Modal
isOpen={this.state.traderModalOpened}
className="modal-dialog"
overlayClassName="modal show"
onAfterOpen={this.context.executeAction(LoadUsersByDepartment, 5)}
>
<div className="modal-content">
<div className="modal-header">
<button type="button" onClick={this.toggleTraderModal.bind(this)} className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 className="modal-title">Set trader</h4>
</div>
<div className="modal-body">
<select>
{users}
</select>
</div>
<div className="modal-footer">
<button type="button" onClick={this.toggleTraderModal.bind(this)} className="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" className="btn btn-primary">Save changes</button>
</div>
</div>
</Modal>
<Modal
isOpen={this.state.OFTModalOpened}
className="modal-dialog"
overlayClassName="modal show"
onAfterOpen={this.context.executeAction(LoadUsersByDepartment, 8)}
>
<div className="modal-content">
<div className="modal-header">
<button type="button" onClick={this.toggleOFTModal.bind(this)} className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 className="modal-title">Set OFT member</h4>
</div>
<div className="modal-body">
</div>
<div className="modal-footer">
<button type="button" onClick={this.toggleOFTModal.bind(this)} className="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" className="btn btn-primary">Save changes</button>
</div>
</div>
</Modal>
</div>
);
}
}
我的行動:
import qwest from 'qwest';
export default function LoadUsersByDepartment(actionContext, payload) {
return qwest.get('/users/fetch/department', {department_id: payload}, {responseType: 'json'})
.then(function (response) {
actionContext.dispatch('RECEIVED_USERS_DATA', {data: response.response})
})
};
但在我的控制檯我看到的是行動正在不斷呼籲。發生了什麼,以及如何才能在打開模式時執行操作?
不錯,是的,這是有道理的,因爲函數只是在代碼加載時執行,而不是作爲onAfterOpen調用的一部分。謝謝。 – imperium2335
確實。我想'executeAction'是在每一次重新渲染時調用的,對吧? – Andreyco
是的,這是正確的。 – imperium2335