在onChange文本框上调用dispatch时，React Component会消失

Question

我在模态对话框上有一个文本框，每次我在文本框的onChange上调度一个动作时，模态自行关闭。如果我不派遣，模态保持他们的。这也发生在其他组件上。有人遇到过这种行为吗？ 我使用不可变的js来表示状态不变性。  以下是代码

const UserDialog = ({ close , dispatch, onHandleCompanyNameChnge, companyName })=> {
  return (
    <div id="myModal" className={ styles.modal }>
      <div className={ styles.modalcontent }>
          <span className={styles.close} onClick = { close }>x</span>
 <form>
      <div className="form-group">
          <input type="text" className="form-control" 
              id="comp_name" placeholder="Company Name"
              onChange = { (e)=>{onHandleCompanyNameChnge(e) }}
              value = { companyName }
              />
      </div>
      <div className="form-group">
          <input type="text" className="form-control" 
              id="comp_message" placeholder="Company Message"
          />
        </div>

        <div className="form-group">
            <input type="text" className="form-control" 
               id="name" placeholder="Name"

            />
        </div>
        <div className="form-group">
            <input type="text" className="form-control" 
                id="job_title" placeholder="Job Title"

            />
        </div>
        <div className="form-group">
            <input type="text" className = "form-control"
                id="address1" placeholder = "Address Line 1"


            />
     </div>
    <div className="form-group">
        <input type="text" className="form-control" 
            id="phone" placeholder="Phone/Other"
         />
      </div>

     <div className="form-group">
         <input type="text" className="form-control" 
            id="address_2" placeholder="Address Line 2"
         />
    </div>
     <div className="form-group">
         <input type="email" className="form-control" 
             id="email" placeholder="Email"
         />
      </div>
     <div className="form-group">
         <input type="text" className="form-control" 
             id="web" placeholder="Web/Others" 
         />
      </div>



    <div className = {styles.editorTextDialogSubmitBtn}>
    </div>
    </form>

      </div>

    </div>
  );
}

const mapPropsToState = (state)=> {
  return {
    companyName : state.getIn(['user'])['companyName']
  }
}

const mapDispatchToProps = (dispatch)=> {
  return {
    close: ()=>{
        dispatch({
            type: 'HIDE_MODAL',
            modalType: 'USER_DIALOG',
            modalProps: {
                propid: 1
            }
        });
    },
    dispatch,
    onHandleCompanyNameChnge: (e)=>{
        e.preventDefault();
        console.log(e.target.value);
        dispatch({
            type:'SET_COMPANY_NAME',
            name:e.target.value
        });
    }
  }
}
export default connect(mapPropsToState,mapDispatchToProps)(UserDialog);


 /*Styles.css*/
 /* The Modal (background) */
.modal {
display: block; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 50%; /* Full width */
height: 100%; /* Full height */
/*  overflow: auto;  Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.0); /* Black w/ opacity */
}

/* Modal Content/Box */
.modalcontent {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}

.close:hover,
.close:focus {
   color: black;
   text-decoration: none;
   cursor: pointer;
 }