Реакция: требуется вызвать родительский компонент для повторной обработки

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 после успешного удаления метода handledelete.

Я довольно новый, чтобы реагировать, а также использовать es6. Я попробовал расшифровать удаление данных в список форм и вызвать 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.

уаг себя = это ; и внутри функции do self.setState (...) вместо this.setState (..)

Надеюсь, это поможет.