Reactjs 反应模态重用

我目前正在制作一个React应用程序，我面临一个问题

我有一个用户列表，一个按钮显示一个模式来添加用户，当您从列表中单击一个用户时，它会显示用于注册用户的相同模式，但带有用户信息，以便您可以修改它

到目前为止，一切正常，当我打开模式时，我将绑定到模式的状态设置为该用户的信息，模式显示，我编辑用户信息，关闭它，列表立即刷新

我的问题是，如果用户想要放弃这些更改，我无法保证状态更改不会持续

我脑子里有一些解决办法，例如，当模式打开时，我可以保存状态吗？如果用户点击Discard，我可以将保存的状态恢复到运行状态吗

Im使用引导反应

    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')
);

var URL\u ALL\u USERS=“/api/USERS”；
从“react bootstrap/lib/Button”导入按钮；
从'react bootstrap/lib/Modal'导入模态；
从“react bootstrap/lib/overlytrigger”导入overlytrigger；
从“react bootstrap/lib/FormGroup”导入FormGroup；
从“react bootstrap/lib/FormControl”导入FormControl；
从“react bootstrap/lib/Col”导入Col；
从“react bootstrap/lib/Form”导入表单；
从'react bootstrap/lib/ControlLabel'导入ControlLabel；
var React=要求（'React'）；
var ReactDOM=require（'react-dom'）；
var ISRBox=React.createClass({
getInitialState:函数（）{
返回{searchData:[]，profileData:{}，modalStatus:false}；
},
updateList（新数据）{
this.setState（{searchData:newData}）；
},
openUserManager（用户数据）{
this.setState（{modalStatus:true，profileData:userdata}）；
},
closeUserManager（）{
this.setState（{modalStatus:false}）；
},
render:function（）{
返回(
ISR经理
添加用户
);
}
});
var UserList=React.createClass({
render:function（）{
var userNodes=this.props.data.map（函数（用户）{
返回(
this.props.onUserEdit（user）}key={user.id}>
{user.email}
{user.name}
{user.info}
{user.lastlogin}
);
}，这个）；
返回(
电子邮件
用户名
研究，站点ID，角色
最后登录
{userNodes}
);
}
});
var SearchForm=React.createClass({
getInitialState:函数（）{
返回{
研究：“，
网站：“”，
名称：“”，
电子邮件：“”，
};
},
handleChange:函数（名称、事件）{
var-change={}；
更改[名称]=event.target.value；
本.设置状态（变更）；
},
搜索：函数（）{
$.ajax({
url:this.props.url+
“？研究=“+this.state.study+
“&site=“+this.state.site”+
“&name=“+this.state.name”+
“&email=“+this.state.email，
数据类型：“json”，
cache:false，
成功：功能（数据）{
this.props.clickHandler（数据）；
}.绑定（此），
错误：函数（xhr、状态、错误）{
console.error（this.props.url，status，err.toString（））；
}.绑定（此）
});
},
render:function（）{
返回(
搜索
);
}
});
var UserHandle=React.createClass({
getInitialState（）{
返回{data:this.props.userdata}；
},
刷新（）{
这是我的国家({
数据：this.props.userdata}）；
},
handleChange:函数（名称、事件）{
var change=this.state.data；
更改[名称]=event.target.value；
this.setState（{showmodel:true，data:change}）；
},
render（）{
返回(
用户管理
电子邮件
使用者
评论
this.props.closeManager}>Close
);
}
});
ReactDOM.render(
,
document.getElementById（'content'）
);

---

问题在于UserHandle

我不是百分之百确定，但也许你可以做到这一点

class AppContainer extends React.Component {
    constructor(props) {
        super();
        this.state = {
            previousName: '',
            name: 'Dan'
        };
    }

    editName(newName) {
        this.setState({
            previousName: this.state.name,
            name: newName
        });
    }

    restoreName() {
        this.setState({
            previousName: '',
            name: this.state.previousName
        });
    }
    render() {
        return(
            <App 
                {...this.state}
                editName={this.editName.bind(this)}
                restoreName={this.restoreName.bind(this)}
            />  
        );
    }
}

class AppContainer扩展了React.Component{
建造师（道具）{
超级（）；
此.state={
以前的名称：“”，
名字：“丹”
};
}
编辑名称（新名称）{
这是我的国家({
previousName:this.state.name，
姓名：newName
});
}
还原胺（）{
这是我的国家({
以前的名称：“”，
名称：this.state.previousName
});
}
render（）{
返回(
);
}
}

我不是百分之百确定，但也许你能做到

class AppContainer extends React.Component {
    constructor(props) {
        super();
        this.state = {
            previousName: '',
            name: 'Dan'
        };
    }

    editName(newName) {
        this.setState({
            previousName: this.state.name,
            name: newName
        });
    }

    restoreName() {
        this.setState({
            previousName: '',
            name: this.state.previousName
        });
    }
    render() {
        return(
            <App 
                {...this.state}
                editName={this.editName.bind(this)}
                restoreName={this.restoreName.bind(this)}
            />  
        );
    }
}

class AppContainer扩展了React.Component{
建造师（道具）{
超级（）；
此.state={
以前的名称：“”，
名字：“丹”