React 模态复用

Question

我目前正在制作一个 React 应用程序，但遇到了一个问题。

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

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

我的问题是，如果用户想要放弃这些更改，我无法确定状态更改不会持续存在。

我有一些解决方法，例如，我可以在模式打开时保存状态，如果用户点击放弃，我可以将保存的状态恢复为运行状态吗？

我正在使用 bootstrap-react

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

问题在于用户句柄

Answer 1

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

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)}
            />  
        );
    }
}