2016-08-10 2 views
0
import React from 'react'; 

import 'materialize-css/sass/materialize.scss'; 
import 'materialize-css/js/materialize.js'; 
import 'font-awesome/scss/font-awesome.scss'; 
import '../styles/main.scss'; 

export default class AddStorageModal extends React.Component { 
    constructor() { 
     super(); 
     this.state = { storageName: "", sharingKey: "" }; 
    } 
    handleChange(event) { 
     this.setState({ [event.target.name]: event.target.value }); 
    } 
    validate() { 
     if (this.state.storageName === "" && this.state.sharingKey == "") { 
      console.log("validation error"); 
      return false; 
     } 
     this.props.createNewStorage(this.state); 
    } 
    resetForm() { 
     this.setState({ storageName: "", sharingKey: "" }); 
     $(function() { 
      Materialize.updateTextFields(); 
     }); 
    } 
    render() { 
     if (this.props.storages.openAddStorageModal) { 
      $('#add-new-storage-modal').openModal({ dismissible: false }); 
     } 
     else { 
      this.resetForm.bind(this); 
      $('#add-new-storage-modal').closeModal(); 
     } 
     return (
      <div id="add-new-storage-modal" className="modal" > 
       <div className="modal-content"> 
        <h6>Enter your new Storage (Freezer, Pantry, etc.) </h6> 
        <div className="row"> 
         <form> 
          <div className="input-field col s12 m12 l12 "> 
           <input id="storage_name" type="text" value={this.state.storageName} name="storageName" onChange={ (event) => this.handleChange(event) } /> 
           <label htmlFor="storage_name">Storage Name</label> 
          </div> 
          <br /> 
          <h4 className="center">OR</h4> 
          <h6>Enter in the sharing key you were given.</h6> 
          <div className="input-field col s12 m12 l12 "> 
           <input id="sharing_key" type="text" value={this.state.sharingKey} name="sharingKey" onChange={ (event) => this.handleChange(event) } /> 
           <label htmlFor="sharing_key">Sharking Key</label> 
          </div> 
         </form> 
        </div> 
       </div> 
       <div className="modal-footer"> 
        <a href="#!" className="waves-effect waves-green btn-flat left" onClick={() => this.validate() }>Add</a> 
        <a href="#!" className="waves-effect waves-green btn-flat" onClick={() => this.props.loadAddStorageModal(false) }>Cancel</a> 
       </div> 
      </div> 
     ) 
    } 
} 

"this.resetForm.bind (this);" 적중되면 실행되지 않습니다. 그것은 일하기 위해 사용하지만 내가 한 짓을 모르지만 지금은 효과가 없습니다.Javascript/ReactJs에서 .Bind()를 위반했습니다. 확실하지 않은 경우 수정 방법

나는 뒤에서 일해야하고 내가 알아낼 수있는 것을 제거해야하지만 누군가가 왜 그 이유를 알기를 바랄뿐입니다.

+0

그 시점에서 그 함수에서 정확히 bind()를 호출하기를 원하셨습니까? 나는 그것이 어떻게 반응하는지는 모르지만'Function.prototype.bind()'는 실제로 함수를 호출하지 않고 새로운'this'에 바인드 된 새로운 함수와 추가 args를 반환합니다. 어떻게 그럴 수 있니? –

답변

0

어쨌든 그 행은 아무 것도하지 않습니다. Function.prototype.bind은 새 함수를 반환하지만 반환 된 함수로는 아무 것도하지 않습니다.

이보다 더 나은 답변을 얻으려면 해당 라인이 기대하는 바를 분명히해야합니다. 어쩌면 resetForm을 다음과 같이 호출하는 것일 수도 있습니다 :

this.resetForm(); 
+0

나는 this.restForm을 호출하려고하고있다. 당신이 제안한 것을 수행함으로써 메소드를 호출 할 것이지만 "this.setState"는 실패 할 것입니다. 어쩌면이 모든 일을하는 것은 나쁜 방법 일 수 있습니다. 기본적으로 모달 대화 상자가 열릴 때마다 모든 이전 입력이 지워지도록하려고합니다. 나는 Validate()에서 그렇게 할 수는 있지만 실제로 서버에 저장을 시작하면 저장할 수 없으므로 맹목적으로 값을 지울 수는 없지만 같은 시간에 저장하지 못한 경우를 확인하는 방법을 모르겠습니다 아약스는 내 createNewStorage 액션에서 일어날 것입니다. – chobo2

+0

@ chobo2 특정 'thisArg'를 가진 함수를 호출하고 싶다면, call을 사용하고 bind는 사용하지 말아야한다. 'this.resetForm.call (this);'그러나이 경우'this.resetForm();'을 수행하면'this'는 이미 호출 컨텍스트입니다. – Paulpro

+0

알다시피, 나는 실수로 공간을 두는 줄 알았다. 어쨌든 작동하지 않습니다. (reactjs는 내가 상태를 설정하는 곳을 좋아하지 않습니다.) 그래서 나는 그것을 잘못하고있다. 나는 그것을위한 최상의 방법을 찾기 위해 새로운 질문을 시작할 것입니다. – chobo2

관련 문제