React:需要调用parent来重新渲染组件

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

所以我需要在handledelete方法成功删除后调用getforms方法.

我很擅长使用es6做出反应.我尝试将deletetransaction扩展到formslist并调用super.getForms.但那也没有用.任何帮助表示赞赏..

Answer 1

您还可以通过子组件将一个函数从父组件传递给props子组件,然后在子组件中执行函数的操作时,您可以简单地调用传入的函数.

例如:

var ParentComponent = React.createClass({
    update: function() {
        this.setState({somethingToUpdate: "newValue"});
        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>
    }
})