प्रतिक्रिया: घटक को पुन: प्रस्तुत करने के लिए अभिभावक को कॉल करने की आवश्यकता

Question

मैं पंक्तियों और उप-पंक्तियों वाली एक तालिका बनाता हूं। जब मैं उप-पंक्ति हटा देता हूं तो मुझे पूरे घटक को फिर से प्रस्तुत करने की आवश्यकता होती है।

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import auth from './auth' 

export class FormList extends React.Component{ 

    constructor(props) { 
    super(props); 
    auth.onChange = this.updateAuth.bind(this) 
    this.state = {results: []}; 
    } 

    componentWillMount() { 
    auth.login(); 
    } 

    // call to get the whole list of forms for react to re-render. 
    getForms() { 
    if(this.state.loggedIn) { 
     $.get(call server url, function(result) { 
     this.setState({ 
      results: result.data.forms 
     }); 
     }.bind(this)); 
    } 
    } 

    updateAuth(loggedIn) { 
    this.setState({ 
    loggedIn: loggedIn 
    }); 
    this.getForms() 
    } 

    componentDidMount() { 
    this.getForms() 
    } 

    render() { 
    return (
    <FormTable results={this.state.results} /> 
    ) 
} 
}; 

class FormTable extends React.Component{ 

    render() { 
    return ( 
     <table className="forms"> 
     <thead> 
     <tr> 
      <th>Form Name</th> 
      <th></th> 
      <th style={{width: "40px"}}></th> 
     </tr> 
     </thead> 
     {this.props.results.map(function(result) { 
      return <FormItem key={result.Id} data={result} />; 
     })}   
     </table> 
    ) 
    } 
}; 

class FormItem extends React.Component{ 
    render() { 
    return (
     <tbody> 
     <tr className="form_row"> 
      <td>{this.props.data.Name}</td> 
      <td></td> 
     </tr> 
     {this.props.data.map(function(result) { 
      return <FormTransaction key={result.Id} data={result} />; 
     })} 
     </tbody> 
    ) 
    } 
}; 

class FormTransaction extends React.Component{ 

    render() { 
    return (
     <tr className="subform_row"> 
      <td>{this.props.data.date}</td> 
      <td></td> 
      <td data-enhance="false"> 
      <DeleteTransaction data={this.props.data.Id} /> 
     </tr> 
    ) 
    } 
}; 

class DeleteTransaction extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {Id:props.data}; 
    this.handleDelete = this.handleDelete.bind(this); 
    } 

    // deletes a sub row and calls get forms to re-render the whole react. 
    handleDelete(event) { 
    $.ajax({ 
     url: server url + this.state.Id, 
     type: 'DELETE', 
     data: {}, 
     dataType: 'json', 
     success: function(result, status) { 
      console.log(this); 
      // need to call get forms here 
     }, 
     error: function(jqXHR, status, error) { 
      console.log(jqXHR); 
     } 
    });*/ 
    } 

    render() { 
    return(
     <i className="danger" onClick = {this.handleDelete}>X</i> 
    ) 
    } 
}; 

ReactDOM.render(
    (<FormList/>), 
    document.getElementById('react-forms') 
); 

इसलिए हटाए जाने के बाद मुझे getforms विधि को कॉल करने की आवश्यकता है, हैंडलेडेटे विधि से सफल है।

मैं प्रतिक्रिया करने के साथ-साथ es6 का उपयोग करने के लिए काफी नया हूं। मैंने formlist में deletetransaction को विस्तारित करने और super.getForms को कॉल करने का प्रयास किया। लेकिन वह या तो काम नहीं किया। किसी भी मदद की सराहना की जाती है ..

Answer 1

आप बच्चे घटक के props के माध्यम से मूल घटक से बच्चे घटक में एक फ़ंक्शन भी पारित कर सकते हैं, फिर बच्चे घटक में फ़ंक्शन निष्पादित करने की क्रिया पर, आप बस समारोह है कि में पारित किया गया था फोन

उदाहरण के लिए:।

var ParentComponent = React.createClass({ 
    update: function() { 
     console.log("updated!"); 
    }, 
    render: function() { 
     <ChildComponent callBack={this.update} /> 
    } 
}) 

var ChildComponent = React.createClass({ 
    render: function() { 
     <button onClick={this.props.callback}>click to update parent</button> 
    } 
}) 

Answer 2

जब भी आप एक और समारोह के अंदर this.setState कॉल करने के लिए कोशिश कर रहे हैं यह पता नहीं होगा आप राज्य स्थापित करने के लिए कोशिश कर रहे हैं।

उदाहरण के लिए, अपने कोड में आप $ .Get (... समारोह (प्रतिक्रिया) {... this.setState() ..}

क्योंकि this.setState समारोह (प्रतिक्रिया के अंदर है) इस बल्कि जड़ वर्ग की ओर इशारा करते से (प्रतिक्रिया) कार्य करने के लिए इंगित करेंगे।

तो तुम क्या करने की जरूरत $ .Get कॉल करने से पहले एक चर सही अंदर इस को बचाने के लिए है।

वर स्वयं = इस ; और फ़ंक्शन के अंदर self.setState (...) इसके बजाय .setState (..)

उम्मीद है कि यह मदद करता है।