0
我目前正在製作React應用程序,而且我正面臨一個問題。React模式重用
我有一個用戶列表,一個顯示添加用戶模式的按鈕,當您從列表中單擊某個用戶時,它將顯示用於註冊用戶的相同模式,但是可以使用用戶信息修改它。
到目前爲止,一切正常,當我打開模式時,我將綁定到模式的狀態設置爲該用戶的信息,模式顯示,編輯用戶信息,關閉它,列表刷新instantanialy。
我的問題是,如果用戶想放棄這些更改,我不能認爲狀態更改不會持續。
我在頭上有幾個解決方法,例如,我可以保存模式打開時的狀態,如果用戶點擊放棄,我將保存的狀態恢復到運行狀態?
進出口使用引導反應的
var URL_ALL_USERS = "/api/users";
import Button from 'react-bootstrap/lib/Button';
import Modal from 'react-bootstrap/lib/Modal';
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
import FormGroup from 'react-bootstrap/lib/FormGroup';
import FormControl from 'react-bootstrap/lib/FormControl';
import Col from 'react-bootstrap/lib/Col';
import Form from 'react-bootstrap/lib/Form';
import ControlLabel from 'react-bootstrap/lib/ControlLabel';
var React = require('react');
var ReactDOM = require('react-dom');
var ISRBox = React.createClass({
getInitialState: function() {
return {searchData: [], profileData: {}, modalStatus: false};
},
updateList (newData) {
this.setState({searchData: newData});
},
openUserManager(userdata) {
this.setState({modalStatus: true, profileData: userdata});
},
closeUserManager() {
this.setState({modalStatus: false});
},
render: function() {
return (
<div className="isrBox">
<h1>ISR Manager </h1>
<button onClick={this.openUserManager}>Add User</button>
<UserHandle userdata={this.state.profileData} status={this.state.modalStatus} closeManager={this.closeUserManager}/>
<SearchForm clickHandler={this.updateList} url={URL_ALL_USERS}/>
<UserList data={this.state.searchData} onUserEdit={this.openUserManager}/>
</div>
);
}
});
var UserList = React.createClass({
render: function() {
var userNodes = this.props.data.map(function(user) {
return (
<tr className="rowStyle" onClick={() => this.props.onUserEdit(user)} key={user.id}>
<td>{user.email}</td>
<td>{user.name}</td>
<td>{user.info}</td>
<td>{user.lastlogin}</td>
</tr>
);
}, this);
return (
<div className="userList">
<table className="tableStyle">
<thead>
<tr>
<th>Email</th>
<th>User Name</th>
<th>Study, Site ID, Role</th>
<th>Last Login</th>
</tr>
</thead>
<tbody>
{userNodes}
</tbody>
</table>
</div>
);
}
});
var SearchForm = React.createClass({
getInitialState: function() {
return {
study: '',
site: '',
name: '',
email: '',
};
},
handleChange: function(name, event) {
var change = {};
change[name] = event.target.value;
this.setState(change);
},
search: function() {
$.ajax({
url: this.props.url +
"?study=" + this.state.study +
"&site=" + this.state.site +
"&name=" + this.state.name +
"&email=" + this.state.email,
dataType: 'json',
cache: false,
success: function(data) {
this.props.clickHandler(data);
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
render: function() {
return (
<div className="searchForm" >
<div className="input">
<input
type="text"
placeholder="Study Code (full or partial) "
value={this.state.study}
onChange={this.handleChange.bind(this, 'study')}
/>
</div>
<div className="input">
<input
type="text"
placeholder="Site ID (full or partial) "
value={this.state.site}
onChange={this.handleChange.bind(this, 'site')}
/>
</div>
<div className="input">
<input
type="text"
placeholder="Name (full or partial) "
value={this.state.name}
onChange={this.handleChange.bind(this, 'name')}
/>
</div>
<div className="input">
<input
type="text"
placeholder="Email (full or partial) "
value={this.state.email}
onChange={this.handleChange.bind(this, 'email')}
/>
</div>
<div className="input">
<button onClick={this.search}>Do Search</button>
</div>
</div>
);
}
});
var UserHandle = React.createClass({
getInitialState() {
return {data: this.props.userdata};
},
refresh() {
this.setState({
data: this.props.userdata});
},
handleChange: function(name, event) {
var change = this.state.data;
change[name] = event.target.value;
this.setState({ showModal: true , data: change});
},
render() {
return (
<div>
<Modal show={this.props.status} onHide={this.props.closeManager} onEntering={this.refresh}>
<Modal.Header closeButton>
<Modal.Title>User Management</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form horizontal>
<FormGroup controlId="formEmail">
<Col componentClass={ControlLabel} sm={2}>
Email
</Col>
<Col sm={10}>
<FormControl type="email"
placeholder="Email"
value={this.state.data.email}
onChange={this.handleChange.bind(this, 'email')}/>
</Col>
</FormGroup>
<FormGroup controlId="formUser">
<Col componentClass={ControlLabel} sm={2}>
User
</Col>
<Col sm={10}>
<FormControl type="text"
placeholder="User name"
value={this.state.data.name}
onChange={this.handleChange.bind(this, 'name')}/>
</Col>
</FormGroup>
<FormGroup controlId="formComment">
<Col componentClass={ControlLabel} sm={2}>
Comment
</Col>
<Col sm={10}>
<FormControl type="text"
placeholder="User name"
value={this.state.data.comment}
onChange={this.handleChange.bind(this, 'comment')}/>
</Col>
</FormGroup>
</Form>
</Modal.Body>
<Modal.Footer>
<Button onClick={() => this.props.closeManager}>Close</Button>
</Modal.Footer>
</Modal>
</div>
);
}
});
ReactDOM.render(
<ISRBox />,
document.getElementById('content')
);
問題是與UserHandle
你必須張貼一些代碼。真的沒有辦法知道要修復什麼,否則。 – Benjamin
明天我會發表一些代碼 –
明天我會發布一些代碼 –