我创建了一个包含行和子行的表.当我删除一个子行时,我需要重新渲染整个组件.
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.但那也没有用.
任何帮助表示赞赏..
您还可以通过子组件的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> } })