प्रतिक्रिया- कुछ कारणों से अपरिभाषित

Question

की संपत्ति 'सेटस्टेट' नहीं पढ़ी जा रही है, मुझे त्रुटि मिल रही है "प्रतिक्रिया- अपरिभाषित की संपत्ति 'सेटस्टेट नहीं पढ़ी जा सकती है"। तो यह .स्टेट कभी भी उन मानों के साथ अपडेट नहीं हो रहा है जो उपयोगकर्ता इनपुट करते हैं। जब मैंने बाइंडिंग की कोशिश की जो टिप्पणी की गई है, तो मुझे अजीब व्यवहार मिलता है जहां मैं उपयोगकर्ता नाम के लिए इनपुट टाइप करने में असमर्थ हूं और मुझे अब शून्य त्रुटि नहीं मिलती है, लेकिन मान केवल अपरिभाषित हैं। किसी भी सहायता की सराहना की जाएगी। धन्यवाद। निर्माता के अंदर

constructor (props) { 
    super(props) 

सूचना props:

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

संपादित

आप निर्माता में बाध्यकारी के पैटर्न का पालन करने के लिए जा रहे हैं, तो आप एक सही निर्माता मंगलाचरण का उपयोग सुनिश्चित करें।

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

आप निर्माता में इस सामग्री को परिभाषित करने की जरूरत नहीं है:

मूल जवाब

ऐसा लगता है आप ES6 घटक परिभाषाएं उपयोग कर रहे हैं के बाद से, आप गाया घटक भीतर this करने के लिए बाध्य करना चाहिए :

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

यह भी प्रतीत होता है कि शायद आप अपने उदाहरण में कुछ कोड बाहर छोड़ दिया है, इसलिए मुझे यकीन है कि अगर आप से छुटकारा पाने की कोशिश कर रहे थे नहीं कर रहा हूँ उदाहरण के लिए अनावश्यक हिस्सों या क्या, लेकिन सुनिश्चित करें कि आपका घटक ठीक से संरचित है।

Answer 2

इन घटनाओं में हैंडलर, e.target<input> है जो इस कार्यक्रम को ट्रिगर करता है।

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

आप अपने value संपत्ति का उपयोग करके एक इनपुट के मूल्य मिलता है:

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

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

आप भी अपने निर्माता में, ठीक से बाध्य है प्रति टिप्पणी की बाहर कोड के रूप में this सुनिश्चित करने के लिए की जरूरत है।

---

आप अपने आदानों उपयुक्त name सहारा देते हैं, आप एक ही onChange हैंडलर के साथ इन की जगह:

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}/> 
    // ... 
}