React- Belirli bir nedenden ötürü 'setState' özelliği okunamaz

Question

okunamıyor, hata "React-undefined 'setState' özelliği okunamıyor" hatası alıyorum. Yani, bu durum asla kullanıcının girdiği değerlerle güncellenmez. Yorumlanan bağlamayı denediğimde, kullanıcı adı için girdiyi yazamadığım ve artık boş hatayı almadığım garip davranışları alıyorum, ancak değerler sadece tanımsız. Herhangi bir yardım takdir edilecektir. Teşekkürler. Kurucuların içinde

constructor (props) { 
    super(props) 

Bildirimi props: yapıcı metotta bağlanma örüntüsünü takip gidiyoruz

import __fetch from "isomorphic-fetch"; 
import React from "react"; 
import InlineCss from "react-inline-css"; 
import Transmit from "react-transmit"; 

import Header from './components/header' 

class Registration extends React.Component { 

    componentWillMount() { 
     if (__SERVER__) { 
      console.log("Hello server from Registration"); 
     } 

     if (__CLIENT__) { 
      console.log("Hello Registration screen"); 
     } 
    } 

    constructor() { 
     super() 

     this.state = { 
      name: '', 
      password: '' 
     } 

     //this.onChangeName = this.onChangeName.bind(this); 
     //this.onChangePassword = this.onChangePassword.bind(this); 
    } 

    onChangeName(e) { 
     //this.state.name = e.target.name 
     this.setState({ name: e.target.name}); 
    } 

    onChangePassword(e) { 
     //this.state.password = e.target.name 
     this.setState({ password: e.target.password }); 
    } 


    emptinessChecker(){ 
     let {name, password} = this.state 
     console.log(name) 
     if (name === "" || password === "") { 
      return true; 
     } 
     else { 
      return false; 
     } 
    } 

    submit() { 
     console.log(this) 
     console.log(this.state) 
     if (this.emptinessChecker()){ 
      alert("Please do not leave any fields blank!"); 
     } 
     else{ 
      var xhr = new XMLHttpRequest(); // new HttpRequest instance 
      xhr.open("POST", "/edit"); 
      xhr.addEventListener("load", e => { 
       console.log(xhr.responseText) 
      }); 

      xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); 
      xhr.send(JSON.stringify(this.state)); 
      window.location.href= "/success" 
     } 
    } 


    render() { 

     //let {username, password} = this.state 

     if (__SERVER__) { 
      console.log("render server from registration"); 
     } 
     if (__CLIENT__) { 
      console.log('we client now!') 
     } 

     return (
      <InlineCss stylesheet={Registration.css()} namespace="Registration"> 
       <Header /> 



       <div> 
        <div className = "Register" > 
         Register 
        </div> 


        <ul className="account-fields"> 

         <div className = 'Name'> 
           <label>Username</label> 
           <input type="text" value={this.state.name} onChange={this.onChangeName} /> 
         </div> 

         <div className = 'Password'> 
           <label>Password</label> 
           <input type="password" value={this.state.password} onChange={this.onChangePassword} /> 
         </div> 


         <div className='submitForm'> 
          <div className='submit' onClick={e=>this.submit()}>Submit</div> 
         </div> 

        </ul> 
       </div> 

      </InlineCss> 




     ); 
    } 
    /** 
    * <InlineCss> component allows you to write a CSS stylesheet for your component. Target 
    * your component with `&` and its children with `& selectors`. Be specific. 
    */ 
    static css() { 
     return (` 
      & .Register { 
       position: fixed; 
       right: 550px; 
       bottom: 550px; 
       font-size: 50px; 
      } 
      & .account-fields { 
       position: fixed; 
       right: 550px; 
       bottom: 450px; 
       font-size: 20px; 
      } 
      & .submitForm { 
       position: fixed; 
       right: 10px; 
       bottom: 10px; 
       width: 200px; 
      } 
      & .submit { 
       cursor: pointer; 
       text-align: center; 
       font-size: 20px; 
       padding: 10px; 
       background-color: #00E4A5; 
       color: #fff; 
       border-radius: 5px; 
       box-shadow: 0 2px 10px 0 rgba(0,0,0,.13); 
       border-bottom: 2px solid #00C791; 
       text-shadow: 0px -1px 0px #009E73; 
      } 
     `); 
    } 

} 

export default Transmit.createContainer(Registration); 

Answer 1

düzenlemek

, Doğru bir yapıcı çağırma kullandığınızdan emin olun. Sen yapıcısı içinde bu şeyleri tanımlamak gerekmez

<input type="text" value={this.state.name} onChange={this.onChangeName.bind(this)} /> 

: Eğer ES6 bileşen tanımları kullandığınız görünür yana

orijinal cevap

, sen render bileşen içindeki this bağlanan gerektiğini :

//this doesn't work 
//this.onChangeName = this.onChangeName.bind(this); 
//this.onChangePassword = this.onChangePassword.bind(this); 

Ayrıca belki de örnekte bazı kod dışında kalan olduğunuz görülüyor, bu yüzden kurtulmak için çalışıyorlardı emin değilim örnek veya neyin gereksiz parçaları, ancak bileşeninizin düzgün bir şekilde yapılandırıldığından emin olun.

Answer 2

Bu olay işleyicilerinde, e.target, olayı tetikleyen <input> dur.

onChangeName(e) { 
    //this.state.name = e.target.name 
    this.setState({ name: e.target.name}); 
} 

onChangePassword(e) { 
    //this.state.password = e.target.name 
    this.setState({ password: e.target.password }); 
} 

Bunu value özelliğini kullanarak bir girişin değeri elde:

onChangeName(e) { 
    this.setState({name: e.target.value}); 
} 

onChangePassword(e) { 
    this.setState({password: e.target.value}); 
} 

Ayrıca oluşturucu içinde yorumladı aşımı kod gereğince, düzgün bağlıdır this emin olmanız gerekir.

---

Eğer ölçüm girişlerini uygun name sahne verirsem, tek onChange işleyicisi ile bu değiştirin:

constructor(props) { 
    super(props) 
    // ... 
    this.onChange = this.onChange.bind(this) 
} 

onChange(e) { 
    this.setState([e.target.name]: e.target.value}) 
} 

render() { 
    // ... 
    <input type="text" name="name" value={this.state.name} onChange={this.onChange}/> 
    <input type="password" name="password" value={this.state.password} onChange={this.onChange}/> 
    // ... 
}