리얼 모드 재사용

Question

현재 리액션 응용 프로그램을 만들고 있는데 문제가 있습니다.

나는 사용자를 추가 할 수있는 모달을 표시하는 단추가 있으며 목록에서 사용자를 클릭하면 사용자를 등록하는 데 사용 된 것과 동일한 모달이지만 사용자 정보가 표시됩니다. 그것을 수정하십시오.

모달을 열 때 모달을 열면 모달에 바인딩 된 상태를 해당 사용자의 정보로 표시하고 모달 디스플레이는 사용자 정보를 편집하고 목록을 닫은 다음 목록을 즉시 새로 고칩니다.

내 문제는 사용자가 변경 사항을 삭제하려는 경우 상태 변경 사항이 지속되지 않는다는 것입니다.

머리에 몇 가지 해결 방법이 있습니다. 예를 들어 모달이 열리고 사용자가 Discard를 누르면 저장된 상태가 실행 중 상태로 복원됩니까?

임

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

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