[javascript] ईवेंट हैंडलर के अंदर प्रतिक्रिया उदाहरण (यह) तक पहुंचने में असमर्थ



Answers

मोरहॉस सही है, लेकिन इसे bind किए बिना हल किया जा सकता है।

आप क्लास गुण प्रस्ताव के साथ एक तीर फ़ंक्शन का उपयोग कर सकते हैं:

class SomeClass extends React.Component {
  changeContent = (e) => {
    this.setState({inputContent: e.target.value})
  } 

  render() {
    return <input type="text" onChange={this.changeContent} />;
  }
}

चूंकि तीर फ़ंक्शन को कन्स्ट्रक्टर के दायरे में घोषित किया जाता है, और क्योंकि तीर कार्य इसे अपने घोषित क्षेत्र से बनाए रखते हैं, यह सब काम करता है। यहां नकारात्मकता यह है कि ये प्रोटोटाइप पर काम नहीं करेंगे, वे सभी को प्रत्येक घटक के साथ पुनर्निर्मित किया जाएगा। हालांकि, यह एक ही चीज में bind परिणाम के बाद से नकारात्मक नहीं है।

Question

मैं ES6 (BabelJS के साथ) में एक साधारण घटक लिख रहा हूं, और यह कार्य करता है this.setState काम नहीं कर रहा है।

विशिष्ट त्रुटियों में कुछ शामिल है

अपरिभाषित संपत्ति 'setState' नहीं पढ़ सकता है

या

this.setState एक समारोह नहीं है

तुम जानते हो क्यों? यहां कोड है:

import React from 'react'

class SomeClass extends React.Component {
  constructor(props) {
    super(props)
    this.state = {inputContent: 'startValue'}
  }

  sendContent(e) {
    console.log('sending input content '+React.findDOMNode(React.refs.someref).value)
  }

  changeContent(e) {
    this.setState({inputContent: e.target.value})
  } 

  render() {
    return (
      <div>
        <h4>The input form is here:</h4>
        Title: 
        <input type="text" ref="someref" value={this.inputContent} 
          onChange={this.changeContent} /> 
        <button onClick={this.sendContent}>Submit</button>
      </div>
    )
  }
}

export default SomeClass



मेरी सिफारिश एक गुण के रूप में तीर कार्यों का उपयोग है

class SomeClass extends React.Component {
  handleClick = () => {
    console.log(this); // the React Component instance
  }
  render() {
    return (
      <button onClick={this.handleClick}></button>
    );
  }
}

और तीर कार्यों का उपयोग न करें

class SomeClass extends React.Component {
      handleClick(){
        console.log(this); // the React Component instance
      }
      render() {
        return (
          <button onClick={()=>{this.handleClick}}></button>
        );
      }
    }

क्योंकि दूसरा दृष्टिकोण प्रत्येक रेंडर कॉल का नया फ़ंक्शन उत्पन्न करेगा, वास्तव में इसका मतलब है कि प्रोप के नए पॉइंटर नए संस्करण की तुलना में, यदि आप बाद में प्रदर्शन के बारे में परवाह करेंगे तो आप React.PureComponent या React.Component का उपयोग कर सकते हैं, आप चाहिए ComponentUpdate (nextProps, nextState) को ओवरराइड कर सकते हैं और जब प्रोप पहुंचे तो उथले चेक




आप इन चरणों का पालन करके इसे हल कर सकते हैं

के साथ संपर्क सामग्री बदलें बदलें

 sendContent(e) {
    console.log('sending input content '+this.refs.someref.value)
  }

के साथ रेंडर समारोह बदलें

<input type="text" ref="someref" value={this.state.inputContent} 
          onChange={(event)=>this.changeContent(event)} /> 
   <button onClick={(event)=>this.sendContent(event)}>Submit</button>



हैलो अगर आप अपने फ़ंक्शन कॉल को बाध्य करने के बारे में परवाह नहीं करना चाहते हैं। आप 'क्लास-ऑटोबॉंड' का उपयोग कर सकते हैं और इसे इस तरह आयात कर सकते हैं

import autobind from 'class-autobind';

class test extends Component {
  constructor(props){
  super(props);
  autobind(this);
}

सुपर कॉल से पहले ऑटोबाइंड न लिखें क्योंकि यह काम नहीं करेगा




हमें निम्नानुसार कन्स्ट्रक्टर में घटक के साथ इवेंट फ़ंक्शन को बांधना होगा,

import React from 'react'

class SomeClass extends React.Component {
  constructor(props) {
    super(props)
    this.state = {inputContent: 'startValue'}
    this.changeContent = this.changeContent.bind(this);
  }

  sendContent(e) {
    console.log('sending input content '+React.findDOMNode(React.refs.someref).value)
  }

  changeContent(e) {
    this.setState({inputContent: e.target.value})
  } 

  render() {
    return (
      <div>
        <h4>The input form is here:</h4>
        Title: 
        <input type="text" ref="someref" value={this.inputContent} 
          onChange={this.changeContent} /> 
        <button onClick={this.sendContent}>Submit</button>
      </div>
    )
  }
}

export default SomeClass

धन्यवाद






Links